QML Button only clickable when tapping with two fingers

[artsydog]

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

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

[artsydog]

This post is deleted!

[AndyS]

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

[artsydog]

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