1.簡介

彈出式用戶界面控件，它可以與Window或ApplicationWindow一起使用，默認(rèn)不可見。

常用屬性介紹，一些公用的基礎(chǔ)屬性就不作介紹，可以查看我前面寫的文章。

closePolicy?: enumeration ：此屬性決定彈出窗口關(guān)閉的情況

• Popup.NoAutoClose： Popup 只會在手動指示時(shí)關(guān)閉。
• Popup.CloseOnPressOutside：當(dāng)鼠標(biāo)在其外部按下時(shí)， Popup 將關(guān)閉。
• Popup.CloseOnPressOutsideParent：當(dāng)鼠標(biāo)在其父級之外按下時(shí)， Popup 將關(guān)閉。
• Popup.CloseOnReleaseOutside：當(dāng)鼠標(biāo)離開 Popup 時(shí)， Popup 將關(guān)閉。
• Popup.CloseOnReleaseOutsideParent：當(dāng)鼠標(biāo)在其父級之外釋放時(shí)， Popup 將關(guān)閉。
• Popup.CloseOnEscape：當(dāng) Popup 具有活動焦點(diǎn)時(shí)按下退出鍵， Popup 將關(guān)閉。

modal : bool：確定彈出窗口是否是模態(tài)的

dim?: bool：顯示彈出窗口是否使背景變暗

Overlay：彈出窗口覆蓋

下圖就是一些內(nèi)邊距、外邊距等的一些屬性。

常用方法：

• void close()：關(guān)閉彈窗
• void open() ：打開彈窗

2.示例

示例1：打開一個模態(tài)框，按ESC鍵關(guān)閉。

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：帶動畫的打開關(guān)閉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設(shè)置了除模態(tài)對話框以外的區(qū)域Overlay.modal: Rectangle{anchors.fill: parentcolor: "red"}//modal設(shè)置了除非模態(tài)對話框以外的區(qū)域，要設(shè)置dim：true才可以O(shè)verlay.modeless: Rectangle{anchors.fill: parentcolor: "green"}}
}