Unsolved QML: ScrollView and MouseAreas: 'mouse hover' not detected on the scrollbar
-
Hi,
I have a QML application and need to open a dialog when I press a button. The dialog must be closed when the mouse is out of the dialog (with no click, so I think 'Popup' control can not be used).
For that, I use MouseAreas and control when the mouse is over one of my MouseAreas. I solved some problems (see https://forum.qt.io/topic/81307/qml-problems-with-mousearea-overlapping), but now I found another problem with a ScrollView (the dialog must contain a ScrollView with a ListView). I can not control when the mouse is over the scrollbar... And the dialog is closed since no MouseArea "has" the mouse over...
How can I control the mouse events on the scrollbar?
Thanks in advance,
DiegoTest.qml
import QtQuick 2.5 import QtQuick.Controls 2.1 import QtQuick.Window 2.0 Item { width: 800 height: 800 property bool m_bButtonHovered: false onM_bButtonHoveredChanged: updateOpen() Rectangle{ id: rect anchors { top: parent.top; topMargin: 100; horizontalCenter: parent.horizontalCenter } height: 50; width: 50 color: "red" MouseArea { anchors.fill: parent hoverEnabled: true onEntered: m_bButtonHovered = true; onExited: m_bButtonHovered = false; } } Loader { id: loader_dialog anchors { top: rect.bottom; horizontalCenter: rect.horizontalCenter} active: false sourceComponent: TestMenu { onClose: loader_dialog.active = false; } } Timer { id: timerOpen interval: 200 running: false repeat: false onTriggered: checkOpen(); } function updateOpen() { if (m_bButtonHovered) timerOpen.start(); } function checkOpen(){ if (m_bButtonHovered) loader_dialog.active = true; } }
TestMenu.qml
import QtQuick 2.0 import QtQuick.Controls 1.3 Rectangle { id: id_dialog signal close() width: 400 height: 600 color: "lightgrey" property int m_iNumHovered: 0 onM_iNumHoveredChanged: update(); function update() { if (m_iNumHovered == 0) timer.start(); } function check() { if (m_iNumHovered == 0) id_dialog.close(); } Timer { id: timer interval: 100 running: false repeat: false onTriggered: check(); } MouseArea { id: mouseAreaTopZone anchors { bottom: parent.top; horizontalCenter: parent.horizontalCenter} width: 50; height: 50 hoverEnabled: true onEntered: m_iNumHovered++; onExited: m_iNumHovered--; } MouseArea { id: mouseAreaDialog anchors.fill: parent hoverEnabled: true onEntered: m_iNumHovered++; onExited: m_iNumHovered--; } ScrollView { id: id_scrollView anchors.centerIn: parent height: 400; width: parent.width ListView { id: id_list model: modelTest anchors { left: parent.left; right: parent.right } height: contentHeight clip: true interactive: false delegate: Text { height: 100 width: id_list.width text: displayname verticalAlignment: Text.AlignVCenter horizontalAlignment: Text.AlignHCenter } } } ListModel { id: modelTest ListElement { optionId: 1; displayname: "Option 1" } ListElement { optionId: 2; displayname: "Option 2" } ListElement { optionId: 3; displayname: "Option 3" } ListElement { optionId: 4; displayname: "Option 4" } ListElement { optionId: 5; displayname: "Option 5" } ListElement { optionId: 6; displayname: "Option 6" } ListElement { optionId: 7; displayname: "Option 7" } } }