Popup

一、描述

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

(相关资料图)

import QtQuick.Windowimport QtQuick.ControlsApplicationWindow {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。

声明为 Popup 的子项的项自动成为 Popup 的 contentItem 的父项。动态创建的项目需要明确地作为 contentItem 的父级。

1.1、Popup 布局

下图说明了窗口中 Popup 的布局：

Popup 的 implicitWidth 和 implicitHeight 通常基于 background 和 contentItem 的隐式大小以及 insets 插入和 paddings。这些属性决定了在没有明确指定 width 或 height 时 Popup 的大小。

contentItem 的几何形状由 padding 确定。在 Popup 的边界与其内容之间保留 10 像素的填充：

Popup {padding: 10contentItem: Text {text: \"Content\"}}background 填充 Popup 的整个宽度和高度，除非已为其指定了 insets 或明确的大小。

负 insets 可用于使背景大于 Popup 。 以下示例使用负 insets 在 Popup 边界之外放置阴影：

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

1.2、Popup 大小

如果在 Popup 中仅使用单个项目，它将调整大小以适应其包含项目的隐式大小。这使得它特别适合与布局一起使用。

Popup {ColumnLayout {anchors.fill: parentCheckBox { text: qsTr(\"E-mail\") }CheckBox { text: qsTr(\"Calendar\") }CheckBox { text: qsTr(\"Contacts\") }}}有时 Popup 中可能有两个项目：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}}

1.3、弹出定位

Popup 的 x 和 y 坐标是相对于其父级的。例如，打开作为 Button 子级的弹出窗口将导致弹出窗口相对于按钮定位。

以下示例使用附加的 Overlay.overlay 属性将 Popup 定位在窗口的中心：

Button {onClicked: popup.open()Popup {id: popupparent: Overlay.overlayx: Math.round((parent.width - width) / 2)y: Math.round((parent.height - height) / 2)width: 100height: 100}}

另一种在窗口中居中 Popup 而不考虑其父项的方法是使用 anchors.centerIn：

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

为了确保 Popup 位于封闭窗口的边界内，可以将 margins 属性设置为非负值。

1.4、Popup 过渡（Transitions）

在退出转换完成后，以下属性从进入转换之前恢复为其原始值：

opacity scale

这允许内置样式在这些属性上进行动画处理，而不会丢失任何明确定义的值。

1.5、Back / Escape 事件处理

默认情况下，如果按下 Escape 或 Back 键，Popup 将关闭。这对于包含想要自己处理这些事件的项目的 Popup 来说可能是有问题的。有两种解决方案：

将 Popup 的 closePolicy 设置为不包括 Popup.CloseOnEscape 的值。

处理 Keys 的 shortcutOverride 信号并在 Popup 之前接受事件。

【领 QT开发教程 学习资料， 点击下方链接莬费领取↓↓ ，先码住不迷路~】

点击这里：

二、属性成员

1、【只读】activeFocus : bool

是否具有活动焦点。

2、anchors.centerIn : Object

锚点。使得从组件在窗口中居中弹出一个窗口变得容易。

注意：Popup 只能在其直接父级或窗口叠加层中居中；试图以其他项目为中心会产生警告。

3、【只读】availableHeight : real

在从 Popup 的高度中扣除垂直填充（padding ）后的值，即 contentItem 可用的高度。

【只读】availableWidth : real

在从 Popup 的宽度中扣除水平填充（padding ）后的值，即 contentItem 可用的宽度。

4、background : Item

背景项目。

如果背景项目没有明确指定大小，它会自动跟随 Popup 的大小。在大多数情况下，不需要为背景项目指定宽度或高度。

注意：大多数 Popup 使用背景项的隐式大小来计算 Popup 本身的隐式大小。如果将背景项目替换为自定义项目，还应该考虑为其提供一个合理的隐式大小（除非它是像 Image 这样的项目，它有自己的隐式大小）。

5、bottomInset : real、leftInset : real、rightInset : real、topInset : real

见上图。

6、bottomMargin : real、leftMargin : real、rightMargin : real、topMargin : real

见上图。

margins : real

默认为 -1。

7、bottomPadding : real、leftPadding : real、rightPadding : real、topPadding : real

见上图。

padding : real

默认填充。

horizontalPadding : real / verticalPadding : real

水平 / 垂直填充。除非明确设置，否则该值等于 padding。

8、clip : bool

是否启用裁剪。默认为 false。

9、closePolicy : enumeration

此属性确定弹出窗口关闭的情况。可以组合这些标志以允许关闭弹出窗口的多种方式。

默认值为 Popup.CloseOnEscape | Popup.CloseOnPressOutside。

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

注意：Popup.CloseOnReleaseOutside 和 Popup.CloseOnReleaseOutsideParent 策略仅适用于模态（modal） Popup 。

10、contentChildren : list

内容子项的列表。该列表包含已在 QML 中声明为 Popup 子项的所有项目。

与 contentData 不同，contentChildren 不包含非可视 QML 对象。

11、【default】contentData : list