Popup Qt Quick event handler issue

Tai Hoang

Hi guys, i use 2 popup like below code in qml. i want that when popup2 open, btn1 is not hovered and change it background to green. How can i do that? Thanks in advance for any help

Popup {
	id: popup1
	width: 200
	height: 300
	modal: true
	focus: true
	contentItem: Rectangle {
		id: popup1Container
		Button {
			id: btn1
			background: Rectangle {
				color: btn1.hovered ? "red" : green
			}
			onClicked: popup2.open()
		}
	}
}

Popup {
	id: popup2
	width: 200
	height: 300
	modal: true
	focus: true
	contentItem: Rectangle {
		id: popup1Container
		Button {
			id: btn2
		}
	}
}

mzimmers

I'm not sure what behavior you expect, but I think you want to disable hovered behavior on the first popup button while the second popup is up. If that's true, here's your code rewritten into a full QML page (I also added a Loader example to give you an idea of an alternative implementation). If I understand your requirement, this works for me.

import QtQuick
import QtQuick.Controls
Window {
    width: 640
    height: 480
    visible: true

    Component.onCompleted: {
        loader.item.open()
    }

    Loader {
        id: loader
        sourceComponent: popupComponent
    }
    Popup {
        id: popup1
        width: 100
        height: 100
        x: 100
        y: 100
        padding: 0
        modal: true
        focus: true
        contentItem: Rectangle {
            id: popup1Container
            Button {
                id: btn1
                anchors.fill: parent
                background: Rectangle {
                    color: btn1.hovered ? "red" : "green"
                }
                onClicked: popup2.open()
            }
        }
    }

    Popup {
        id: popup2
        width: 100
        height: 100
        padding: 0
        closePolicy: Popup.NoAutoClose
        x: popup1.x + popup1.width
        y: popup1.y + popup1.height
        modal: true
        focus: true
        contentItem: Rectangle {
            id: popup2Container
            height: 100
            width: 100
            Button {
                id: btn2
                anchors.fill: parent
                background: Rectangle {
                    color: "yellow"
                }
                onClicked: popup2.close()
                Text {
                    text: "Close"
                    anchors.centerIn: parent
                }
            }
        }
    }
    Component {
        id: popupComponent
        Popup {
            width: 100
            height: 100
            modal: true
            focus: true
            background: Rectangle {
                id: popupContainer
                color: "blue"
                TapHandler {
                    onTapped: popup1.open()
                }
            }
        }
    }
}

Tai Hoang

@mzimmers thank you for your support!

You are right, I want to disable hover behavior on btn1( on popup1) when popup2 visible.
( I need to change background of btn1 to green when popup2 opened)

But it seen that the code you show don't help me. I have implemented like your code but btn1 also "red" when popup2 opened

mzimmers

@Tai-Hoang what version of Qt are you using, and what platform? Also, does your app select a Style?

Tai Hoang

@mzimmers i am using Qt 6.7.2 on ubuntu 22.04 (run on vmware). My app is not select any Style.

GrecKo

@Tai-Hoang said in Popup Qt Quick event handler issue:

i want that when popup2 open, btn1 is not hovered and change it background to green.

What have you tried and what is blocking you?
You currently have a binding to determine the background color of btn1. Have you tried changing that binding to account for your additional condition?

Tai Hoang

@GrecKo if the code like below:

Rectangle {
	id: rect
	
	width: 100
	height: 100
	color: mouseArea.containsMouse ? "red" : "green"
	
	MouseArea {
		id: mouseArea
		anchors.fill: rect
		hoverEnabled: true
		onClicked: popup1.open()
	}
}

Popup {
	id: popup1
	width: 200
	height: 300
	modal: true
	focus: true
	anchors.centerIn: parent
	closePolicy: Popup.CloseOnEscape
	contentItem : Rectangle {
	}
}

The color of id "rect" auto change to "red" when popup1 opened. (the popup auto "catch" hovered behavior on mousearea)

But if i have 2 popup like the first post, when popup2 opened (by click on btn1 on popup1) , btn1 will keep hovered behavior (not "catch" by popup2)