NativeScript 中的叠加定位

Question

我正在为受 material 启发的各种下拉列表开发一个 nativescript 插件。该插件向页面添加一个 AbsoluteLayout 作为背景，然后向该 AbsoluteLayout 添加一个 ListView，以便选择器显示在顶部。它还添加了一个带有标签的 GridView，这样就可以将其放置在其 XML 定义的位置。这是在视图的 XML:

中使用的插件示例

<GridLayout rows="auto" columns="*, auto">
    <StackLayout>
        <label text="Color" />
        <label style="height: 3; background-color: gray;" />
    </StackLayout>

    <MDL:MaterialDropdownList col="1" id="ddlColors"
        items="{{ colors }}" selectedIndex="{{ selectedColorIndex }}" >
    </MDL:MaterialDropdownList>
</GridLayout>

我想要做的是在点击 MaterialDropdownList 元素时直接在其上方显示 ListView。但是，我已经尝试通过 originX 和 originY，一直向上通过每个父元素，直到我点击页面，然后我得到了一个极低的“2”。这是一个片段：

let src: viewModule.View = <viewModule.View>arg.object,
        x: number, y: number;
x = src.originX;
y = src.originY;
let parent = src.parent;
while (parent !== this.page) {
    x += parent.originX;
    y += parent.originY;
    parent = parent.parent;
}

console.log(`x and y are ${x} and ${y}`); //2, 2

this._listPicker.originX = x;
this._listPicker.originY = y;

非常感谢任何想法！

Answer 1

我相信您正在寻找的功能是 element.getLocationOnScreen() 或 element.getLocationInWindow() 获取元素的实际位置。

NativeScript 中的叠加定位

Overlay positioning in NativeScript

nativescript