Please nominate your Qt Champions for 2021! https://forum.qt.io/topic/132134/looking-for-the-2021-qt-champions

Qt 5.14.2 - Advices about MouseArea and DragHandler



  • Hello there,

    I have a ListView that builds Sliders into a Frame according to a model.
    Everything works fine for this part of my development.
    This program can be used on a normal screen or touch screen.

    But I have to implement a "funny" behavior : when pressing the mouse (or touching screen) somewhere in the Frame and dragging it (with button always pressed) over all the Sliders it must set the value of the Slider that is hovered over by the mouse according to the mouse's X coordinate (mapped to the corresponding value for the Slider at this position) !

    And of course, I want to keep the original behavior of a QML Slider for example setting the value with the handle.

    The ListView is in a qml file and the Slider with its Texts on the left are in another qml file.

    Here is an image of my example :
    Sliders.png

    I made a simple example with DragHangler and 2 Texts

    import QtQuick 2.12
    import QtQuick.Window 2.12
    import QtQuick.Layouts 1.12
    
    Window {
        visible: true
        width: 480
        height: 320
        title: qsTr("DragHandler Test")
    
        ColumnLayout {
            spacing: 10
            anchors.fill: parent
    
            Text {
                id: text1
                Layout.preferredWidth: parent.width
                Layout.alignment: Qt.AlignCenter
                horizontalAlignment: Text.AlignHCenter
                font.pointSize: 30
                color: handler1.active ? "magenta" : "black"
                text: "position (" + handler1.translation.x + "," + handler1.translation.y + ")"
    
                DragHandler {
                    id: handler1
                    target: null
                }
            }
    
            Text {
                id: text2
                Layout.preferredWidth: parent.width
                Layout.alignment: Qt.AlignCenter
                horizontalAlignment: Text.AlignHCenter
                font.pointSize: 30
                color: handler2.active ? "magenta" : "black"
                text: "position (" + handler2.translation.x + "," + handler2.translation.y + ")"
    
                DragHandler {
                    id: handler2
                    target: null
                }
            }
        }
    }
    
    

    But it is not the behavior that I'm waiting for.
    If I click outside of a text area and drag the mouse, when it enters in the first text the text change according to the position that's good ! But when the mouse leaves the text area the text continues to change and when the mouse enters in the second text area nothing happens !
    I tried to put the DragHandler common for both texts but the 2 texts change together !

    First, is it possible ? Any idea on how to realize such behavior ?
    With MouseArea(s) ? With DragHandler ? With something else ? I don’t know where to start.

    Thanks for your help !


Log in to reply