Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

QML Button only clickable when tapping with two fingers



  • I'm referring to a problem in my QML code. The following code describes this layout:

    0_1537771762829_settings.PNG

    The area writing "Decouple Device" is a flat button, positioned onto a semi-transparent rectangle, surrounded by lines, all ordered in a column. The thing is, that the button can only be clicked/pressed/touched when two fingers tap on the touchscreen. You don't even have to put both fingers on the button, to click it. It's enough if one finger pushes anywhere around the button and the second one clicks it. This behaviour only occurs, when the button is anchored/positioned in a column/has a fixed x-y-position on the screen. Without positioning I can't get the button where I want it to be, but it is clickable like any other button then. So I'm trying to prevent this double-tap-behaviour. Can anybody help?

    import QtQuick 2.11
    import QtQuick.Controls 2.2
    import QtQuick.Layouts 1.11
    
    Item {
        anchors.fill: parent
    
        Rectangle {
            id: transparentRectangle
            anchors.fill: settingsItem
            color: "#ffffff"
            opacity: 0.4
            radius: 6
            visible: true
        }
    
        Column {
            id: settingsColumn
            spacing: 0
    
            Rectangle {
                id: iconRectangle
                color: "transparent"
                radius: 6
                width: transparentRectangle.width
                height: transparentRectangle.height / 3
                visible: true
    
                Text {
                    anchors.centerIn: iconRectangle
                    text: "Settings"
                    horizontalAlignment: Text.AlignLeft
                    verticalAlignment: Text.AlignVCenter
                    color: "#ffffff"
                    font.pixelSize: transparentRectangle.width / 10
                }
            }
    
            Rectangle {
                id: firstBorder
                width: transparentRectangle.width
                height: 1
                opacity: 0.3
                visible: true
            }
    
            Button {
                id: bluetoothFirstButton
                width: settingsItem.width
                height: (settingsItem.height - settingsItem.height * 0.05 * 2) / 3 * 0.9
                font.pixelSize: settingsItem.width / 20
                font.capitalization: Font.Capitalize
                text: "Decouple device"
                flat: true
                onClicked: print('Button 1 clicked') //connectionHandler.hostModeChanged(QBluetoothLocalDevice.HostPoweredOff)
                opacity: 0.8
                enabled: true
            }
    
            Rectangle {
                id: secondBorder
                width: transparentRectangle.width
                height: 1
                opacity: 0.3
                visible: true
            }
    
            Button {
                id: bluetoothSecondButton
                width: transparentRectangle.width
                height: (transparentRectangle.height - transparentRectangle.height * 0.05 * 2) / 3 * 0.9
                font.pixelSize: transparentRectangle.width / 20
                font.capitalization: Font.Capitalize
                text: ""
                flat: true
                enabled: false
                onClicked: print('Button 2 pressed')
                opacity: 0.8
                visible: false
            }
        }
    }
    

    It could also be relevant that this item is used within a SwipeView (excuse my poor positioning skills):

    SwipeView {
            id: swipingView
            anchors.top: parent.top
            anchors.bottom: stackView.top
            anchors.left: parent.left
            anchors.right: parent.right
            interactive: false
            currentIndex: 0
            background: Rectangle {
                anchors.fill: swipingView
                color: "transparent"
            }
    
            Page {
                id: statusPage
                background: Rectangle {
                    anchors.fill: statusPage
                    color: "transparent"
                }
    
                Item {
                    id: statusItem
                    anchors.top: parent.top
                    anchors.horizontalCenter: parent.horizontalCenter
    
                    Label {
                        id: firstLabel
                        text: qsTr("-")
                        font.pixelSize: swipingView.width / 25
                        color: "#ffffff"
                        anchors.top: parent.top
                        anchors.topMargin: statusPage.height / 2.5
                        anchors.horizontalCenter: parent.horizontalCenter
                        visible: true
                    }
    
                    Label {
                        id: statusLabel
                        text: qsTr("-")
                        font.pixelSize: swipingView.width / 8
                        color: "#ffffff"
                        anchors.top: firstLabel.bottom
                        anchors.topMargin: parent.height / 6 / 3.5
                        anchors.horizontalCenter: parent.horizontalCenter
                        visible: true
                    }
                }
            }
    
            Page {
                id: settingsPage
                background: Rectangle {
                    anchors.fill: settingsPage
                    color: "transparent"
                }
    
                Settings {
                    id: settingsItem
                    anchors.left: parent.left
                    anchors.leftMargin: (parent.width - parent.width * 0.8)
                    anchors.right: parent.right
                    anchors.rightMargin: (parent.width - parent.width * 0.8)
                    anchors.top: parent.top
                    anchors.topMargin: (parent.height - parent.width * 0.7 * 0.6) / 2
                    anchors.bottom: parent.bottom
                    anchors.bottomMargin: (parent.height - parent.width * 0.7 * 0.6) / 2
                }
            }
        }
    

    Thanks in advance!
    Nici



  • This post is deleted!

  • Moderators

    @artsydog This is just a quick idea in case it helps, but have you tried setting the z order to ensure the button is on top? It might be that it doesn't pass the touch points through until after the first one if there is something rendered over the top.



  • @AndyS Thanks so much for your suggestion. I tried to replicate the behaviour in a smaller project and found out that the background of a ChartView I'm using is overlapping my Settings menu (which is transparent obviously). So i set the z order of the SwipeView and the StackView containing the chart. Now it's working :)


Log in to reply