一、概述

Popup是类似弹出式用户界面控件的基本类型。它可以与Window或ApplicationWindow一起使用。

  import QtQuick.Window 2.2import QtQuick.Controls 2.12ApplicationWindow {id: windowwidth: 400height: 400visible: trueButton {text: "Open"onClicked: popup.open()}Popup {id: popupx: 100y: 100width: 200height: 300modal: truefocus: trueclosePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent}}

为了确保场景中其他项目上方显示一个弹出框，建议使用ApplicationWindow。

ApplicationWindow还提供背景调光效果。

Popup不提供自己的布局，这就要求我们自己定位其内容，例如通过创建RowLayout或ColumnLayout。
声明为弹出框子元素的项自动成为弹出框内容项的父元素。动态创建的项需要显式地赋给contentItem。

二、Popup 的布局

下图展示了窗口中弹出框的布局:

弹出框的implicitWidth和implicittheight通常是基于背景和内容项的隐式大小加上任何内嵌和内边距。当没有明确指定宽度或高度时，这些属性决定了弹出框的大小。

内容项的几何形状由内边距决定。下面的例子在弹出框的边界和内容之间保留了10px的内边距:

  Popup {padding: 10contentItem: Text {text: "Content"}}

背景元素会填满整个弹出框的宽度和高度，除非为其设置了insets或明确的尺寸。
负插图可以用来使背景比弹出框大。下面的例子使用负插图在弹出框边界外放置阴影:

  Popup {topInset: -2leftInset: -2rightInset: -6bottomInset: -6background: BorderImage {source: ":/images/shadowed-background.png"}}

三、弹出分级

如果在弹出框中只使用单个元素，它将调整大小以适应其包含的元素的隐式大小。这使得它特别适合与布局一起使用。

  Popup {ColumnLayout {anchors.fill: parentCheckBox { text: qsTr("E-mail") }CheckBox { text: qsTr("Calendar") }CheckBox { text: qsTr("Contacts") }}}

有时，弹出框中可能有两项:

  Popup {SwipeView {// ...}PageIndicator {anchors.horizontalCenter: parent.horizontalCenteranchors.bottom: parent.bottom}}

在这种情况下，Popup无法计算出合理的隐式大小。由于我们将PageIndicator锚定在了SwipeView上，我们可以简单地将内容大小设置为视图的隐式大小:

  Popup {contentWidth: view.implicitWidthcontentHeight: view.implicitHeightSwipeView {id: view// ...}PageIndicator {anchors.horizontalCenter: parent.horizontalCenteranchors.bottom: parent.bottom}}

四、弹出定位

与Qt Quick中的Item类似，Popup的x和y坐标是相对于其父元素的。这意味着打开一个按钮的子弹出框，将导致该弹出框相对于按钮的位置。

下面的例子使用附加的覆盖层。属性Overlay将一个弹出窗口定位在窗口的中心，而不管打开弹出窗口的按钮在什么位置:

  Button {onClicked: popup.open()Popup {id: popupparent: Overlay.overlayx: Math.round((parent.width - width) / 2)y: Math.round((parent.height - height) / 2)width: 100height: 100Label{text: "弹出内容！"}}}

另一种让弹出窗口居中的方法是使用anchors.centerIn，而不用考虑它的父元素:

  ApplicationWindow {id: window// ...Pane {// ...Popup {anchors.centerIn: Overlay.overlay}}}

为了确保弹出窗口位于包围窗口的边界内，可以将margin属性设置为非负值。

五、定制化

  import QtQuick 2.12import QtQuick.Controls 2.12Popup {id: popupbackground: Rectangle {implicitWidth: 200implicitHeight: 200border.color: "#444"}contentItem: Column {}}