Qt Quick - Summary of Popup usage
I. Overview
Popup is the basic type of popup-like user interface controls. It can be used with Window or ApplicationWindow.
import QtQuick.Window 2.2
import QtQuick.Controls 2.12
ApplicationWindow {
id: window
width: 400
height: 400
visible: true
Button {
text: "Open"
onClicked: popup.open()
}
Popup {
id: popup
x: 100
y: 100
width: 200
height: 300
modal: true
focus: true
closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent
}
}
To ensure that a popover appears above other items in the scene, it is recommended to use an ApplicationWindow.
ApplicationWindow also provides background dimming effects.
A Popup does not provide its own layout, which requires us to position its content ourselves, for example by creating a RowLayout or ColumnLayout.
Items declared as children of the popover automatically become the parent of the popover content item. Dynamically created items need to be explicitly assigned to contentItem .
2. The layout of Popup
The following image shows the layout of the popup in the window:
The implicitWidth and implicitheight of a popup are usually based on the implicit size of the background and content items plus any inlining and padding. These properties determine the size of the popover when no width or height is explicitly specified.
The geometry of a content item is determined by padding. The following example preserves 10px padding between the popover's border and its content:
Popup {
padding: 10
contentItem: Text {
text: "Content"
}
}
The background element fills the entire width and height of the popover unless insets or explicit dimensions are set for it.
Negative insets can be used to make the background larger than the popover . The following example uses negative insets to place a shadow outside the bounds of the popover:
Popup {
topInset: -2
leftInset: -2
rightInset: -6
bottomInset: -6
background: BorderImage {
source: ":/images/shadowed-background.png"
}
}
3. Pop-up classification
If only a single element is used in the popover, it will resize to fit the implicit size of the element it contains. This makes it especially suitable for use with layouts.
Popup {
ColumnLayout {
anchors.fill: parent
CheckBox {
text: qsTr("E-mail") }
CheckBox {
text: qsTr("Calendar") }
CheckBox {
text: qsTr("Contacts") }
}
}
Sometimes, there may be two items in the popup:
Popup {
SwipeView {
// ...
}
PageIndicator {
anchors.horizontalCenter: parent.horizontalCenter
anchors.bottom: parent.bottom
}
}
In this case, Popup cannot calculate a reasonable implicit size. Since we anchored the PageIndicator to the SwipeView, we can simply set the content size to the view's implicit size:
Popup {
contentWidth: view.implicitWidth
contentHeight: view.implicitHeight
SwipeView {
id: view
// ...
}
PageIndicator {
anchors.horizontalCenter: parent.horizontalCenter
anchors.bottom: parent.bottom
}
}
4. Pop-up positioning
Similar to Item in Qt Quick, the x and y coordinates of Popup are relative to its parent element. This means that opening a subpopover of a button will cause the popover to be positioned relative to the button.
The example below uses additional overlays. The property Overlay positions a popup in the center of the window, regardless of the position of the button that opened the popup:
Button {
onClicked: popup.open()
Popup {
id: popup
parent: Overlay.overlay
x: Math.round((parent.width - width) / 2)
y: Math.round((parent.height - height) / 2)
width: 100
height: 100
Label{
text: "弹出内容！"
}
}
}
Another way to center the popup regardless of its parent element is to use anchors.centerIn :
ApplicationWindow {
id: window
// ...
Pane {
// ...
Popup {
anchors.centerIn: Overlay.overlay
}
}
}
To ensure that the popup stays within the bounds of the surrounding window, the margin property can be set to a non-negative value.
5. Customization
import QtQuick 2.12
import QtQuick.Controls 2.12
Popup {
id: popup
background: Rectangle {
implicitWidth: 200
implicitHeight: 200
border.color: "#444"
}
contentItem: Column {
}
}