Overlay positioning in NativeScript

问题

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>

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;

Any thoughts greatly appreciated!

回答1:

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

来源：https://stackoverflow.com/questions/36918477/overlay-positioning-in-nativescript

标签

nativescript