How to customize Popup closing behavior? - qt

Question

I created a control, and when I click it, the popup will be displayed on the left and right sides. Like:
There may be many other buttons on the main interface. I hope that when I click the button, the popup will not close, but when I click other external areas, the popup will close.
I thought of using closePolicy, but when I set Popup.NoAutoClose, no matter I click the outer area or the button control, the popup will not be closed. When I set Popup.CloseOnPressOutside, the popup will be closed.
So how to customize the closing behavior of the popup? Or is there any other custom control way to achieve such a requirement(may not be popup)?
Edit
main.qml
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
Window {
width: 640
height: 480
visible: true
title: qsTr("Hello World")
MenuSpinner{
id: menuId
x: 100
y: 50
}
Column{
x: 500
spacing: 10
Repeater{
model: 3
Button{
width: 100
height: 50
text: index
onPressed: {
console.log("pressed" + index)
}
}
}
}
}
MenuSpinner.qml
import QtQuick 2.0
import QtQuick.Controls 2.5
Rectangle{
width: 300
height: 50
property bool bTextClicked: false
onBTextClickedChanged: {
if(bTextClicked) popup.open()
else popup.close()
}
Rectangle{
width: 100
height: parent.height
x: rect1.width
border.color: "blue"
Text {
id: text
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
text: qsTr("value")
font.pixelSize: 16
}
MouseArea{
anchors.fill: parent
onClicked: {
bTextClicked = !bTextClicked
}
}
}
Popup {
id: popup
leftPadding: 0
rightPadding: 0
topPadding: 0
bottomPadding: 0
width: parent.width
height: parent.height
background: Rectangle {
anchors.fill: parent
color: "transparent"
//border.color: "black"
}
Rectangle{
id: rect1
width: 100
height: 50
Text {
text: qsTr("pop1")
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
font.pixelSize: 16
}
color: "transparent"
border.color: "blue"
}
Rectangle{
id: rect2
x: parent.width - rect1.width
width: 100
height: 50
Text {
text: qsTr("pop2")
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
font.pixelSize: 16
}
color: "transparent"
border.color: "blue"
}
onClosed: {
bTextClicked = false
console.log("close")
}
}
}

Answer 1

One way to do it is to catch mouse clicks on the window itself. Add a function or signal to MenuSpinner that can be called to close the popup. Any clicks to the other buttons should still work.
main.qml
Window {
MouseArea {
anchors.fill: parent
onClicked: {
menuId.closePopup();
}
}
MenuSpinner{
id: menuId
}
}
MenuSpinner.qml
Rectangle{
function closePopup() {
popup.close();
}
Popup {
id: popup
closePolicy: Popup.NoAutoClose
}
}