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,
    Diego

    Test.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" }
        }
    }
    

Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.