NativeScript中的重叠定位 [英] Overlay positioning in NativeScript

问题描述

我正在开发一个nativescript插件，以获取受材料启发的各种下拉列表.该插件将一个AbsoluteLayout添加到Page中以用作背景，然后将ListView添加到该AbsoluteLayout中，以便将选择器显示在顶部.它还添加了带有标签的GridView，并将其放置在其XML定义的位置.这是在视图的XML中使用的插件的示例:

I'm working on a nativescript plugin for a material-inspired dropdown list of sorts. The plugin adds an AbsoluteLayout to the Page to act as a backdrop, then adds a ListView to that AbsoluteLayout so that the picker is displayed on top. It also adds a GridView with label and such that gets put in the position defined by its XML. Here's an example of the plugin in use in a view's 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元素时直接在MaterialDropdownList元素上方显示ListView.但是，我一直尝试遍历originX和originY，一直遍历每个父元素，直到单击Page，然后返回超低数"2".这是一个片段:

What I'm wanting to do is display the ListView directly over the MaterialDropdownList element when it's tapped. However, I've tried going by the originX and originY, all the way up through each parent element until I hit the Page, and I get back a super low number of "2". Here's a snippet:

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;

任何想法都值得赞赏！

推荐答案

我相信您要查找的功能是element.getLocationOnScreen() 或element.getLocationInWindow()以获取元素的实际位置.

I believe the function you are looking for is element.getLocationOnScreen() or element.getLocationInWindow() to get the actual position of the element.

这篇关于NativeScript中的重叠定位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！