如何将QML Widget置于顶层？

当然有啦！在QML里，你完全能实现和Qt Widget中raise_()/raise()类似的顶层堆叠效果，主要有两种实用方法：

1. 使用Item内置的raise()方法 #

所有可视化的QML元素（比如Button、Rectangle这些）都继承自Item，而Item本身就提供了raise()和lower()方法，专门用来调整元素在父容器内的堆叠顺序：

• raise()：将当前元素移到父元素的子元素列表的末尾，由于QML是按子元素顺序依次渲染（后面的元素覆盖前面的），所以调用后元素会显示在同一父容器内所有其他子元素的顶层
• lower()：和raise()相反，把元素移到子元素列表的开头，放到底层

举个简单的示例，点击按钮时将自己置顶：

import QtQuick 2.15
import QtQuick.Controls 2.15

Rectangle {
    width: 300
    height: 100

    Button {
        id: btn1
        text: "按钮1"
        onClicked: btn1.raise()
    }

    Button {
        id: btn2
        text: "按钮2"
        anchors.left: btn1.right
        anchors.leftMargin: 20
        onClicked: btn2.raise()
    }
}

2. 通过z属性控制堆叠层级 #

除了调整子元素顺序，你还可以用Item的z属性来直接定义元素的堆叠优先级：

• 默认情况下所有元素的z值都是0
• z值越大，元素显示层级越高，会覆盖z值更小的元素
• 这个方法的优势是，哪怕元素不在同一个父容器下，也能通过设置z值来控制谁在顶层

示例代码：

import QtQuick 2.15
import QtQuick.Controls 2.15

Rectangle {
    width: 300
    height: 100

    Button {
        id: btn1
        text: "按钮1"
        onClicked: btn1.z = 10 // 设置更高的z值置顶
    }

    Button {
        id: btn2
        text: "按钮2"
        anchors.left: btn1.right
        anchors.leftMargin: 20
        onClicked: btn2.z = 10
    }
}

如果想恢复默认的堆叠顺序，只需要把z值设回0即可。

两种方法的小区别 #

• raise()/lower()是调整父容器内的子元素顺序，适合同一父容器内的元素管理，不会影响其他容器的元素
• z属性是全局（相对父容器的堆叠上下文）的优先级设置，更灵活但需要注意不要设置过多混乱的z值，避免后期维护麻烦

内容的提问来源于stack exchange，提问作者kettle