Popup pop-up interface of QT Quick QML instance
All love must be spared no effort, if you really like it, give it a higher priority and more time!
The GIT project file is here: QmlLearningPro , compile and select Popup
For other QML articles, please click here: QT QUICK QML Study Notes
1. Demonstration
● The effect is as follows:
2. Implementation process
In a QML file, no matter how many sub-files there are, you only need to add the Popup component in the root node file, and it can pop up and stick to the top of the interface.
1. Center popup
Click "Test 1", the pop-up is as follows:
● Key code:
popup root file:
///-------------------------居中弹窗-------------------------\\\
function showPopupCenter(raiseItem) {
popupCenter.raiseItem = raiseItem
popupCenter.open()
}
Popup {
id: popupCenter
modal: true //模态， 为 true后弹出窗口会叠加一个独特的背景调光效果
focus: true //焦点, 当弹出窗口实际接收到焦点时，activeFocus将为真
padding: 0
closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside
property var raiseItem: null
background: Rectangle {
color: Qt.rgba(0,0,0,0) //背景为无色
}
Loader {
id: loaderCenter
onLoaded: {
popupCenter.x = (rootWindow.width - loaderCenter.width) * 0.5
popupCenter.y = (rootWindow.height - loaderCenter.height) * 0.5
}
}
onOpened: {
loaderCenter.sourceComponent = popupCenter.raiseItem
}
onClosed: {
loaderCenter.sourceComponent = null
popupCenter.raiseItem = null
}
}
The component to pop up:
Button {
id: btn1
text: "测试1"
onClicked: {
rootWindow.showPopupCenter(display1)
}
}
Component {
id: display1
Rectangle {
width: lab1.width*1.5
height: lab1.height*5
radius: height*0.2
color: "#FF9D6F"
border.width: 4
border.color: "black"
Label {
id: lab1
anchors.centerIn: parent
font.bold: true
font.pointSize: 20
text: "测试界面1(居中)"
}
}
}
Note the modal and padding parameters:
If modal is false, the pop-up effect without shading is as follows:
If padding = 0 is not specified, it is not in the middle, as follows:
The specific popup layout is as follows: you can see the official description:
2. Just below the popup
Click the "Test 2" button, the pop-up is as follows:
● Key code:
popup root file:
///----------------------正下方弹窗-------------------------\\\
function showPopupBottom(raiseItem, btnItem) {
popupBottom.raiseItem = raiseItem
popupBottom.btnItem = btnItem
popupBottom.open()
}
Popup {
id: popupBottom
modal: true //模态， 为 true后弹出窗口会叠加一个独特的背景调光效果
focus: true //焦点, 当弹出窗口实际接收到焦点时，activeFocus将为真
closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside
padding: 0 //很重要
property var raiseItem: null //要显示的组件
property var btnItem: null //提供位置的组件
background: Rectangle {
color: Qt.rgba(0,0,0,0) //背景为无色
}
Loader {
id: loaderBottom
onLoaded: {
var item = rootWindow.contentItem.mapFromItem(popupBottom.btnItem, 0 ,0)
popupBottom.x = item.x
//考虑右边边界问题
if(popupBottom.x + loaderBottom.width > rootWindow.width) {
popupBottom.x = rootWindow.width - loaderBottom.width
}
//考虑左边边界问题
popupBottom.y = item.y + popupBottom.btnItem.height
if(popupBottom.y + loaderBottom.height > rootWindow.height) {
popupBottom.y = rootWindow.height - loaderBottom.height
}
}
}
onOpened: {
loaderBottom.sourceComponent = popupBottom.raiseItem
}
onClosed: {
loaderBottom.sourceComponent = null
popupBottom.raiseItem = null
}
}
The component to pop up:
Button {
id: btn2
text: "测试2"
onClicked: {
rootWindow.showPopupBottom(display2,btn2)
}
}
}
Component {
id: display2
Rectangle {
width: lab2.width*1.5
height: lab2.height*5
radius: height*0.2
color: "#97CBFF"
border.width: 4
border.color: "black"
Label {
id: lab2
anchors.centerIn: parent
font.bold: true
font.pointSize: 20
text: "测试界面2(底部)"
}
}
}
● Point 1: mapFromItem
var item = rootWindow.contentItem.mapFromItem(popupBottom.btnItem, 0 ,0)
popupBottom.x = item.x
popupBottom.y = item.y
Map the (0,0) coordinates of the btnItem button to the relative position in the root file rootWindow
● Key 2: Consider boundary conditions:
//考虑右边边界问题
if(popupBottom.x + loaderBottom.width > rootWindow.width) {
popupBottom.x = rootWindow.width - loaderBottom.width
}
//考虑左边边界问题
popupBottom.y = item.y + popupBottom.btnItem.height
if(popupBottom.y + loaderBottom.height > rootWindow.height) {
popupBottom.y = rootWindow.height - loaderBottom.height
}
As follows, when the interface shrinks, it will not go out of bounds:
Click here for the GIT project file: QmlLearningPro , compile and select Popup
For other QML articles, please click here: QT QUICK QML Study Notes