Question

我尝试在qml中创建自定义工具提示，但无法强制窗口小部件显示在布局中的其他项目之上。我知道为什么qml会以这种方式运行，但我找不到一种让它按照我想要的方式运行的方法。

以下是演示此问题的代码：

import QtQuick 2.3
import QtQuick.Controls 1.2
import QtQuick.Window 2.2

ApplicationWindow {
    title: qsTr("Hello World")
    width: 640
    height: 480


    Flow {
        anchors.fill: parent
        anchors.margins: 10
        spacing: 5

        Repeater {
            model: ["foo", "bar", "buzz"]

            delegate: Item {
                width: item.width
                height: item.height

                Rectangle {
                    id: item
                    color: "blue"
                    width: 100
                    height: 100

                    Text {
                        text: modelData
                        color: "white"
                        anchors.centerIn: parent
                    }
                }

                Rectangle {
                    width: 80
                    height: 120
                    color: "black"
                    anchors.left: item.right
                    anchors.leftMargin: 5

                    Text {
                        text: "tooltip"
                        color: "white"
                        anchors.centerIn: parent
                    }
                }
            }
        }
    }
}

我想要的是列表中其他项目之上的工具提示，而不是相反。

Answer 1

它能做到吗？

ApplicationWindow {
    title: qsTr("Hello World")
    width: 640
    height: 480

    Flow {
        anchors.fill: parent
        anchors.margins: 10
        spacing: 5

        Repeater {
            id: repeater;
            model: ["foo", "bar", "buzz"]

            delegate: Item {
                width: item.width
                height: item.height
                z: repeater.model.length - index

                Rectangle {
                    id: item
                    color: "blue"
                    width: 100
                    height: 100

                    Text {
                        text: modelData
                        color: "white"
                        anchors.centerIn: parent
                    }
                }

                Rectangle {
                    width: 80
                    height: 120
                    color: "black"
                    anchors.left: item.right
                    anchors.leftMargin: 5

                    Text {
                        text: "tooltip"
                        color: "white"
                        anchors.centerIn: parent
                    }
                }
            }
        }
    }
}

Answer 2

我建议你按照我在其中一个应用程序中的方式执行此操作。不幸的是我现在无法得到消息来源，所以我会努力记住。

您可以创建自定义工具提示元素，例如：

<强> ToolTip.qml

import QtQuick 2.3

Rectangle {
    color:"black"
    width:100
    height: 30
    property string label: "tooltip"
    Text {
        color: "white"
        text: parent.label
        anchors.fill: parent
        verticalAlignment: Text.AlignVCenter
        horizontalAlignment: Text.AlignHCenter
    }
}

现在，当某个适当的事件发生时（onPositionChanged或onEntered），您可以显示您的工具提示：

onEntered: {
    var component = Qt.createComponent("ToolTip.qml");
    if (component.status == Component.Ready) {
        var tooltip = component.createObject(rootElement);
        tooltip.x = xxx ///
        tooltip.y = xxx /// here you should adjust position of tooltip
    }
}

注意 - 工具提示的父级应该是根元素，这样您就可以确保工具提示项位于可视堆栈的顶部而不会重叠。

qml自定义工具提示的布局

2 个答案: