页面渲染后如何获取任何可视节点的位置（X，Y）？答案

【问题标题】：How to get position (X,Y) of any visual node after page rendered?页面渲染后如何获取任何可视节点的位置（X，Y）？
【发布时间】：2013-07-15 14:48:40
【问题描述】：

我需要创建一个可拖动的按钮。拖动从多个源开始，在接收器结束。创建页面后有什么方法可以获取源和接收器的位置。

Container {
                horizontalAlignment: HorizontalAlignment.Fill
                Label {
                    id: preId
                    preferredWidth: 700

                    text: rootContainer.data.part1
                    multiline: true
                    textStyle {
                        textAlign: TextAlign.Center
                        color: Color.Black
                    }
                    horizontalAlignment: HorizontalAlignment.Center
                }
            }
            Container {
                horizontalAlignment: HorizontalAlignment.Center

                SinkButton {
                    id: sinkId
                    preferredHeight: 100
                    preferredWidth: 686
                    textColor: Color.Black
                    enabled: false
                    layoutProperties: AbsoluteLayoutProperties {

                    }
                }
            }
            Container {
                horizontalAlignment: HorizontalAlignment.Fill
                topPadding: -5
                bottomPadding: squareDisplay ? 10 : 50
                Label {
                    id: postId
                    text: rootContainer.data.postData
                    multiline: true
                    textStyle {
                        textAlign: TextAlign.Center
                        color: Color.Black
                    }
                    horizontalAlignment: HorizontalAlignment.Center
                }
            }
        }

我想知道“sinkId”相对于窗口的位置。它的位置因“preId”文本长度而异。 LayoutUpdateHandler 是一种可能的解决方案，但 layoutFrame.x 或 layoutFrame.y 在检查时总是为零。有没有办法在页面创建时/之后获取任何可视节点的位置？

【问题讨论】：

代码中的SinkButton 是什么？我想这是一个自定义小部件。您还需要为此提供代码，否则该段代码将没有机会启动

标签： qml blackberry-10 blackberry-cascades

【解决方案1】：

首先，LayoutUpdateHandler 很好地报告了layoutFrame 属性，但不确定为什么它不适用于您的情况。下面是工作代码，展示了如果您想利用此类来满足您的需求：

import bb.cascades 1.0

Page {
    Container {
        layout: DockLayout {}
        horizontalAlignment: HorizontalAlignment.Fill
        verticalAlignment: VerticalAlignment.Fill
        Button {
            id: button
            horizontalAlignment: HorizontalAlignment.Center
            verticalAlignment: VerticalAlignment.Center
            text: "click me"
            onClicked: {
                console.log("Button layout - x:" + layoutHandler.layoutFrame.x + ", y:" + layoutHandler.layoutFrame.y + 
                            ", width:"+ layoutHandler.layoutFrame.width + ", height: " + layoutHandler.layoutFrame.height);
            }

            attachedObjects: [
                LayoutUpdateHandler {
                    id: layoutHandler
                }
            ] 
        }
    }
}

此外，如果您想响应小部件的触摸事件，我猜这是可拖动功能的意思，最好的办法是使用touchBehaviors 提供的一系列触摸输入反应，可以添加到任何@987654328 @ 就像通过 QML 和通过 C++ 一样，没关系。因此，为了做到这一点，您需要创建一个 TouchBehavior 对象，该对象具有已定义的 TouchReaction 和相应的属性。

因此，例如，为了在接收到触摸事件之前跟踪某些VisualNode 的触摸事件，直到发生触摸事件，您需要定义一个相应的touchBehaviour 对象并连接到该@ 的onTouch() 插槽987654334@，您可以在其中获得touchBehaviour 事件过滤器捕获的所有事件。下面是演示这种方法的代码：

import bb.cascades 1.0

Page {
    Container {
        layout: DockLayout {}
        horizontalAlignment: HorizontalAlignment.Fill
        verticalAlignment: VerticalAlignment.Fill
        Button {
            id: button
            horizontalAlignment: HorizontalAlignment.Center
            verticalAlignment: VerticalAlignment.Center
            text: "click me"

            touchBehaviors: [
                TouchBehavior {
                    TouchReaction {
                        eventType: TouchType.Down
                        phase: PropagationPhase.AtTarget
                        response: TouchResponse.StartTracking
                    }
                }
            ]

            onTouch: {
                console.log("===== got touch event of type " + event.touchType + " =====");
                console.log("\twindowX - " + event.windowX);
                console.log("\twindowX - " + event.windowX);
                console.log("\twindowY - " + event.windowY);
                console.log("\tlocalX - " + event.localX);
                console.log("\tlocalY - " + event.localY);
                console.log("\n");
            }
        }
    }
}

然后您可以在onTouch() 插槽处理程序中添加您的逻辑。

关于该主题的其他信息：

【讨论】：

【解决方案2】：

LayoutUpdateHandler 会告诉你元素相对于父元素的位置，在 SinkId 的情况下，它是一个包装它的容器。在这种情况下，LayoutUpdateHandler 将始终返回 0。

要么移除容器并直接在 sinkId 上设置 HorizontalAlignment: HorizontalAlignment.Center 属性并使用 LayoutUpdateHandler，要么在 sinkId 周围的容器上使用 LayoutUpdateHandler。

【讨论】：