Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. QML Button only clickable when tapping with two fingers
Forum Updated to NodeBB v4.3 + New Features

QML Button only clickable when tapping with two fingers

Scheduled Pinned Locked Moved Unsolved QML and Qt Quick
4 Posts 2 Posters 872 Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • A Offline
    A Offline
    artsydog
    wrote on last edited by artsydog
    #1

    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

    1 Reply Last reply
    0
    • A Offline
      A Offline
      artsydog
      wrote on last edited by
      #2
      This post is deleted!
      1 Reply Last reply
      0
      • AndySA Offline
        AndySA Offline
        AndyS
        Moderators
        wrote on last edited by
        #3

        @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.

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

        1 Reply Last reply
        1
        • A Offline
          A Offline
          artsydog
          wrote on last edited by
          #4

          @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 :)

          1 Reply Last reply
          0

          • Login

          • Login or register to search.
          • First post
            Last post
          0
          • Categories
          • Recent
          • Tags
          • Popular
          • Users
          • Groups
          • Search
          • Get Qt Extensions
          • Unsolved