How I Can Use MapView + ScrollView

omerfurkan

Hello, I am doing some experiments with Qt 6.9. I want to use ScrollView together with MapView. I have done this, but I have a problem. When I try to scroll the ScrollView, the MapView moves as well. How can I fix this issue? I want to separate the scrolling actions of the two. In other words, when I drag the MapView, it should scroll the MapView, and when I drag the ScrollView, it should scroll the ScrollView. Right now, in both cases, the MapView is scrolling.

Psuedo code


    MapView {
        id: mapView
        anchors.fill: parent

        ScrollView {
            width: parent.width
            height: 200
            anchors.left: parent.left
            anchors.leftMargin: 5
            anchors.right: parent.right
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 5
            clip: true
            contentWidth: parent.width
            contentHeight: 200

            ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
            ScrollBar.vertical.policy: ScrollBar.AlwaysOff

            ScrollBar.horizontal.interactive: true
            ScrollBar.vertical.interactive: false

            RowLayout {
                anchors.fill: parent
                Repeater {
                    model: 10
                    delegate:  Rectangle {
                        width: 200
                        height: 300
                        color: "red"
                    }
                }
            }
        }
    }

mzimmers

I didn't actually test this, but here's one possible approach:

MapView {
    interactive: !scrollView.dragging
    ScrollView {
        id: scrollView

omerfurkan

@mzimmers not work but thanks.

mzimmers

I rewrote your pseudocode into a working example:

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QtLocation
import QtPositioning

Window {
    id: mainWindow
    width: 1024
    height: 768
    visible: true

    Plugin {
        id: mapPlugin
        name: "osm"
    }

    MapView {
        id: mapView
        anchors.fill: parent
        map.plugin: mapPlugin;
        map.center: QtPositioning.coordinate(36.5725, -121.9486);
        map.zoomLevel: 15;
    }

    Flickable {
        id: flickable
        width: parent.width
        height: 200
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        anchors.leftMargin: 5
        anchors.bottomMargin: 5
        contentWidth: rowLayout.implicitWidth
        clip: true
        z: 1

        RowLayout {
            id: rowLayout
            Repeater {
                model: 10
                delegate: Rectangle {
                    implicitWidth: 200
                    height: 300
                    color: "red"
                }
            }
        }
    }
}

A few points:

I had to replace the ScrollView with a Flickable
the Flickable is a sibling of the MapView, not a child.
I gave the Flickable a z: 1.

It seems to work pretty well for me.

There's a bit of quirk, though: if you try to drag the Flickable beyond its boundary, you end up scrolling the map underneath. Whether this is a bug or a feature is a matter of opinion. There are workarounds for this (using a MouseArea, for example) if you don't like it.