当前位置：首页 > article >正文

Qml-Popup的使用

article 2024/10/24 0:07:01

Qml-Popup的使用

Popup介绍

Popup 是qml中弹窗内界面的基本类型，被Dialog、Drawer、ToopTip、Menu等继承；
Popup在窗口中弹出窗口布局如下：
Popup的属性大致可分为：几何属性（x,y,z,width,height等），四个方向相关的布局属性（margin、padding、inset）,modal(是否为模态)，dim(背景是否暗掉)、焦点相关的、弹窗关闭策略（closePolicy）、过渡动画相关属性（ enter、exit）；具体属性介绍参照Qt的帮助文档
方法和信号都是和弹窗打开关闭相关的，具体介绍参照Qt的帮助文档
Popup 中font,palette，附加属性由父窗口传递，而非可视化父对象。Popup中子元素的font，palette,等要受Popup中设置font,palette值影响，如果Popup中未设置，受Popup父窗口（一般是ApplicationWindow或者QAppication设置的全局的font 、palette）影响。

Popup的实例代码

import QtQuick
import QtQuick.Controls

//Popup 是qml中弹窗内界面的基本类型，被Dialog、Drawer、ToopTip、Menu等继承；
//Popup 主要由 Background 和 ContentItem 组成，在四个方向的Margin,inset padding属性，以及焦点、关闭策略、是否是模态等属性组成，几何属性

//使用按钮打开一个弹窗
Item{

    height: 480
    width: 320

    //在Button下方弹出一个弹窗
    Button{
        id:idBut
        text: "Popup"
        height: 30
        anchors.centerIn: parent

        onClicked: {
            idPopup.open();
            idPopup.y = idBut.height
        }

        Popup{

            id:idPopup
            width: 150
            height: 150
            modal: true
            dim:true                                                                    //dim 控制背景是否变暗，true变暗,false,背景不变
            closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside                //esc | 弹窗外点击退出

            //Popup 中font,palette，附加属性 由父窗口传递，而非可视化父对象，即 Button中设置palette对Popup无影响
            //Popup中子元素的font，palette,等要受Popup影响
            palette.windowText: "red"
            font.bold: true
            font.pixelSize: 20

            //可以使用contentItem形式，也可以直接使用子对象进行布局，contentItem是弹窗中内容显示区域
            contentItem: Label{
                anchors.fill: parent
                anchors.margins: 10
                text: "I am Popup"                              //是个红色字,粗体，20号

            }

            //弹窗区域背景设置
            background: Rectangle{
                color:Qt.rgba(1.0,1.0,0.0,0.2)                  //黄色0.2透明度 1像素，红色边框，圆角半径5
                border.width: 1
                border.color: "red"
                radius: 5
            }
        }

    }
}