Map Touch Issue in Qt QML

serkan_tr

I created a Map in Qt QML and placed buttons and a Toolbar on top of it. However, when I tap on the pop-up windows that appear after pressing the buttons or toolbar, I noticed that the Map in the background still receives the touch events. I tried adding a MouseArea to the pop-up windows to prevent this, but nothing changed. What kind of adjustment should I make in this case

main.qml

.
.
.

 MapView {
            visible: isLogin
            id: mapViewId
            z: -1
        }

        Toolbar {
            id: toolbarId
            visible: isLogin
            anchors {
                top: parent.top
                horizontalCenter: parent.horizontalCenter
                topMargin: height / 10
            }
        }

        WidgetLayer {
            id: widgetLayerlId
            visible: isLogin
            anchors {
                top: toolbarId.bottom
                right: toolbarId.right
                topMargin: buttonWidth * 0.2
            }
        }

        Loader {
            id: pageLoader
            anchors.centerIn: parent
        }
.
.
.

Toolbar .qml

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Dialogs
import Qt5Compat.GraphicalEffects


Rectangle {
    id: toolbarRoot

    width: parent.width * 0.98
    height: parent.height * 0.08
    radius: height / 4
    color: Qt.rgba(0, 0, 0, 0.80)

    Rectangle {
        id: logoRec
        width: parent.width * 0.12
        height: parent.height * 0.5
        color: mainColor

        Image {
            id: image
            source: "/images/lectron.png"
            anchors.fill:       parent
            fillMode: Image.PreserveAspectFit
        }

        ColorOverlay {
            anchors.fill:       image
            source:             image
            color:              "white"
        }

        MouseArea {
            anchors.fill: parent
            onClicked: {
                pageLoader.source = "SettingsPage.qml"
            }
        }

        anchors{
            verticalCenter: parent.verticalCenter
            left: parent.left
            leftMargin: height

        }
    }

    Text {
        id: timeText
        text: _TimeManager.clock
        font.pointSize: fontSize * 1.5
        anchors.centerIn:  parent
        color: "white"
    }

    Text {
        id: vehicleInfoText
        text: qsTr("Locked")
        font.pointSize: fontSize * 1.4
        anchors {
            verticalCenter: parent.verticalCenter
            left: timeText.right
            leftMargin: parent.width * 0.2
        }
        color: "yellow"
    }

    Rectangle {
        id: batteryFrame
        width: height * 0.6
        height: parent.height * 0.5
        border.color: "white"
        border.width: 2
        color: mainColor
        anchors {
            verticalCenter: deviceChargeText.verticalCenter
            right: deviceChargeText.left
            rightMargin: parent.height * 0.2
        }

        property real innerWidth: width - border.width * 4
        property real innerHeight: height - border.width * 4

        Rectangle {
            id: batteryLevel
            width: batteryFrame.innerWidth
            height: (batteryFrame.innerHeight * _BatteryStatus.charge) / 100
            x: batteryFrame.border.width * 2
            y: batteryFrame.height - batteryFrame.border.width * 2 - height
            color: "white"
            radius: 2
            onHeightChanged: {
                y = batteryFrame.height - batteryFrame.border.width * 2 - height
            }
        }
    }

    Rectangle {
        width: height * 2
        height: batteryFrame.height * 0.1
        color: batteryFrame.border.color
        anchors.bottom: batteryFrame.top
        anchors.horizontalCenter: batteryFrame.horizontalCenter
    }

    Text {
        id: deviceChargeText
        text:  "%" + _BatteryStatus.charge
        font.pointSize: fontSize * 1.3
        color: textColor
        anchors {
            verticalCenter: parent.verticalCenter
            right: parent.right
            rightMargin: parent.height * 0.2
        }
    }

    Connections {
        target: _SerialManager
        function onDeviceConnected(device)
        {
            vehicleInfoText.color = "lime"
            if(device == 1)
            {
                vehicleInfoText.text = qsTr("Stand")
            }
            else if(device == 2)
            {
                vehicleInfoText.text = qsTr("Drone")
            }
            else if(device == 3)
            {
                vehicleInfoText.text = qsTr("Simulation")
            }
        }
        function onDeviceDisconnected()
        {
            vehicleInfoText.text = qsTr("Locked")
            vehicleInfoText.color = "yellow"
        }


    }
}

MapView.qml

Item {
    id: mapRootId

    anchors.fill: parent
    property bool isReconnect: false
  PositionSource {
        id: positionSource
        active: true
        updateInterval: 1000 // Update position every 1 second
        onPositionChanged: {
            if (positionSource.position) {
                map.center = positionSource.position.coordinate;
            }
        }
    }

    Map {
        id: map
        anchors.fill: parent

        plugin: mapPlugin
        center: QtPositioning.coordinate(39.93, 32.89)
        zoomLevel: 14
        property geoCoordinate startCentroid
        activeMapType: map.supportedMapTypes[supportedMapTypes.length - 1]
.
.
.

zvoopz

Make popup windows modal
https://doc.qt.io/qt-6/qml-qtquick-dialogs-dialog.html

Kai Nickel

It's a bug, it's complicated:

One workaround would be to set a TapHandler in the popup to consume the events.