QML Popup详解

1.简介

弹出式用户界面控件，它可以与Window或ApplicationWindow一起使用，默认不可见。

常用属性介绍，一些公用的基础属性就不作介绍，可以查看我前面写的文章。

closePolicy : enumeration ：此属性决定弹出窗口关闭的情况

• Popup.NoAutoClose： Popup 只会在手动指示时关闭。
• Popup.CloseOnPressOutside：当鼠标在其外部按下时， Popup 将关闭。
• Popup.CloseOnPressOutsideParent：当鼠标在其父级之外按下时， Popup 将关闭。
• Popup.CloseOnReleaseOutside：当鼠标离开 Popup 时， Popup 将关闭。
• Popup.CloseOnReleaseOutsideParent：当鼠标在其父级之外释放时， Popup 将关闭。
• Popup.CloseOnEscape：当 Popup 具有活动焦点时按下退出键， Popup 将关闭。

modal : bool：确定弹出窗口是否是模态的

dim : bool：显示弹出窗口是否使背景变暗

Overlay：弹出窗口覆盖

下图就是一些内边距、外边距等的一些属性。

常用方法：

• void close()：关闭弹窗
• void open() ：打开弹窗

2.示例

示例1：打开一个模态框，按ESC键关闭。

Window {visible: truewidth: 700height: 700title: qsTr("Hello World")Button {text: "Open"onClicked: popup.open()}Popup {id: popupx: 100y: 100width: 200height: 300modal: truefocus: trueclosePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent}
}

示例2：带动画的打开关闭popup

Window {visible: truewidth: 700height: 700title: qsTr("Hello World")Button {text: "Open"onClicked: popup.open()}Popup {id: popupx: 100y: 100width: 200height: 300modal: truefocus: trueclosePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParententer: Transition {NumberAnimation {property: "opacity"from: 0.0to: 1.0duration: 2000}}exit: Transition {NumberAnimation {property: "opacity"from: 1.0to: 0.0duration: 2000}}}
}

示例3：Overlay的简单使用

Overlay.modal 要生效，使用modal：true

Overlay.modeless要生效，使用modal：false 并且置dim：true

Window {visible: truewidth: 700height: 700title: qsTr("Hello World")Popup {id: popupx: 100y: 100visible: truewidth: 200height: 300modal: falsefocus: true//dim:trueclosePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent//modal设置了除模态对话框以外的区域Overlay.modal: Rectangle{anchors.fill: parentcolor: "red"}//modal设置了除非模态对话框以外的区域，要设置dim：true才可以Overlay.modeless: Rectangle{anchors.fill: parentcolor: "green"}}
}