Please nominate your Qt Champions for 2021!

Qml-presentation-system and mouse interaction with a SlideSwitch

  • Hi everyone

    I'm preparing a speech with the qml-presentation-system.
    On one slide I have add a SlideSwitch.
    The SlideSwitch appears as expected but I can't move the handle.

    It seems that the MouseArea works perfect and receives the mouse click.
    But the drag is not working.
    The code below is working perfectly when I use qmlscene but integrated in the qml-presentation-system it is not working.
    Any ideas?

    @import QtQuick 2.0

    This item provides a secure slideswitch. A SlideSwitch is a switch that can
    not be pressed accidentally. The user has to slide to knob to the other side
    to toggle.
    Item {
    id: slideswitch
    property alias on: button.on
    signal toggled(bool on)

    Rectangle {
        id: background
        property bool hover: false
        color: "#2d2d2d"
        border.width: 4
        border.color: "white"
        radius: 8
        width: parent.width
        height: parent.height
        anchors.fill: parent
    Rectangle {
        id: button
        property bool on: false
        height: background.height - 2*background.border.width
        width: (background.width / 2)-10
        color: button.on ? "grey" : "#2d2d2d"
        border.width: background.border.width
        border.color: "white"
        radius: 4
            id: label
            anchors.fill: parent
            text: button.on ? "DSP" : "ARM"
            font.pixelSize: 27
            font.bold: true
            color: button.on ? "#2d2d2d" : "grey"
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment:  Text.AlignVCenter
        MouseArea {
            id: bla
            anchors.fill: parent
            drag.axis: Drag.XAxis
            drag.minimumX: background.border.width
            drag.maximumX: background.width - button.width - background.border.width
            onReleased: {
                console.log("Greatings from below. ButtonX: "+button.x+"drag.max: "+drag.maximumX)
                if(button.x > ((drag.maximumX) / 2)) {
                    slideswitch.state = ""
                    slideswitch.state = "on"
                else {
                    slideswitch.state = ""
                    slideswitch.state = "off"
    // using states to differentiate between "on" and "off"
    states: [
        State {
            name: "on"
            PropertyChanges {
                target: button
                x: background.width - button.width - background.border.width
                on: true
        State {
            name: "off"
            PropertyChanges {
                target: button
                x: background.border.width
                on: false
    transitions: Transition {
        NumberAnimation {
            properties: "x"
            duration: 400
            easing.type: Easing.OutQuad


Log in to reply