qml popup 弹出窗口

popup 弹出窗口

在QML中，Popup是一种用于显示临时窗口或对话框的元素。
它可以用来创建各种弹出式界面，如菜单、对话框、提示框等。

以下是一个简单的示例，展示了如何在QML中使用Popup：

import QtQuick 2.15
import QtQuick.Controls 2.15

// 主应用程序窗口
ApplicationWindow {
    visible: true  // 设置窗口可见
    width: 640     // 设置窗口宽度
    height: 480    // 设置窗口高度

    // 按钮，用于打开弹出窗口
    Button {
        text: "打开弹出窗口"  // 按钮显示的文本
        anchors.centerIn: parent  // 将按钮居中对齐在父窗口中
        onClicked: popup.open()  // 当按钮被点击时，打开弹出窗口
    }

    // 弹出窗口
    Popup {
        id: popup  // 弹出窗口的唯一标识
        width: 200  // 设置弹出窗口的宽度
        height: 100  // 设置弹出窗口的高度
        anchors.centerIn: Overlay.overlay  // 将弹出窗口居中对齐在父窗口的覆盖层中
        modal: true  // 设置为模态窗口，阻止用户与父窗口交互
        focus: true  // 设置弹出窗口获得焦点
        closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside  // 设置关闭弹出窗口的策略，按下Esc键或点击弹出窗口外部区域时关闭

        // 弹出窗口的内容项
        contentItem: Rectangle {
            color: "lightgray"  // 设置矩形的背景颜色
            // 文本显示在矩形中
            Text {
                text: "这是一个弹出窗口"  // 文本内容
                anchors.centerIn: parent  // 将文本居中对齐在父矩形中
            }
        }
    }
}

示例

import QtQuick 2.15
import QtQuick.Controls 2.15

// 主应用程序窗口
ApplicationWindow {
    visible: true  // 设置窗口可见
    width: 640     // 设置窗口宽度
    height: 480    // 设置窗口高度

    // 按钮，用于打开弹出窗口
    Button {
        text: "打开弹出窗口"  // 按钮显示的文本
        anchors.centerIn: parent  // 将按钮居中对齐在父窗口中
        onClicked: popup.open()  // 当按钮被点击时，打开弹出窗口
    }

    // 弹出窗口
    Popup {
        id: popup  // 弹出窗口的唯一标识
        width: 200  // 设置弹出窗口的宽度
        height: 100  // 设置弹出窗口的高度
        anchors.centerIn: Overlay.overlay  // 将弹出窗口居中对齐在父窗口的覆盖层中
        modal: true  // 设置为模态窗口，阻止用户与父窗口交互
        focus: true  // 设置弹出窗口获得焦点
        closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside  // 设置关闭弹出窗口的策略，按下Esc键或点击弹出窗口外部区域时关闭

        // 弹出窗口的内容项
        contentItem: Rectangle {
            color: "lightgray"  // 设置矩形的背景颜色
            Column {
                anchors.centerIn: parent  // 将列居中对齐在父矩形中
                spacing: 10  // 设置列中子元素之间的间距

                // 第一个按钮
                Button {
                    text: "按钮1"  // 按钮显示的文本
                    onClicked: console.log("按钮1被点击")  // 当按钮被点击时，输出日志信息
                }

                // 第二个按钮
                Button {
                    text: "按钮2"  // 按钮显示的文本
                    onClicked: console.log("按钮2被点击")  // 当按钮被点击时，输出日志信息
                }
            }
        }

        // 设置模态覆盖层的颜色和透明度
        Overlay.modal: Rectangle {
            anchors.fill: parent  // 填充父元素
            color: "black"  // 设置背景颜色
            opacity: 0.5  // 设置透明度

            // 在模态覆盖层中放置一个弹出窗口
            Popup {
                width: parent.width  // 设置弹出窗口的宽度与父元素相同
                height: 80  // 设置弹出窗口的高度
                visible: true  // 设置弹出窗口可见

                // 在弹出窗口中放置一个按钮
                Button {
                    text: "X"  // 按钮显示的文本
                    anchors.right: parent.right  // 将按钮右对齐到父元素的右侧
                    anchors.top: parent.top  // 将按钮顶部对齐到父元素的顶部
                    anchors.rightMargin: 10  // 设置按钮右侧的边距
                    anchors.topMargin: 10  // 设置按钮顶部的边距
                    onClicked: console.log("X被点击")  // 当按钮被点击时，输出日志信息
                }
            }
        }
    }
}