How to remove bounds of the Flickable qml component?

LinG

I want to display a large amount of content, for example, a grid of multiple images inside a window that is smaller than the content, similar to a geographical map but instead of a map, I want my own components as the "map". For this minimal working example, let's take for the content a grid of images with a total size of 1000x1000 with a window into this content of only 300x300.

I have tried 2 different approaches, but I will only go into detail of the first approach as that is the one that got me closest to my desired result:

I have tried the Flickable component but the content cannot be moved outside the predefined bounds, making the user unable to move the view in order to display all the parts of the content. So the simplest solution that I'm thinking about now is if I could remove these bounds from the Flickable component, but how?

I have also tried the Map component but it requires a "plugin" and I was unable to figure out how to use this component with my own content of an image grid.

The content that I want to show is something like this

    Grid {
      columns: 5
      spacing: 2

      Repeater {
        model: ListModel { 
          ListElement {
            path: 'test1'
          }
          ListElement {
            path: 'test2'
          }
//        ...
          ListElement {
            path: 'test25'
          }
        }
        Rectangle {
          width: 200
          height: 200
          Image {
            anchors.fill: parent
            source: 'file:' + path
          }
        }
      }
    }

I tried, putting this inside the Flickable like this

Flickable {
    anchors.centerIn: parent
    width: 300
    height: 300
    contentWidth: 1000
    contentHeight: 1000
    clip: true

// INSERT CUSTOM GRID COMPONENT HERE
}

This results in a 300x300 view inside the content as expected, but once you start to flick through the content to view different parts of it, you are stopped by the bounds preventing you from seeing anything outside these bounds. You can see it while dragging but once you release the view of the content is reset to these bounds.

So how do I remove these bounds? (Or is there a different component more suitable for my application?)

Here is a gif that shows how the content can be dragged passed the bounds, but once released it will only go up to the bounds and not further

(This is a duplicate of my post on stackoverflow)

Pradeep P N

Hi @LinG
Your code seems to be fine for me,

please check the below sample code.

import QtQuick 2.9
import QtQuick.Window 2.2

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Flickable {
        anchors.centerIn: parent
        width: 300
        height: 300
        contentWidth: 1000
        contentHeight: 1000
        clip: true

        Grid {
            columns: 5
            spacing: 2

            Repeater {
                model: 10
                Rectangle {
                    width: 200
                    height: 200
                    color: 'blue'
                }
            }
        }
    }
}

this allows you to scorl/drag without any bounding issue.

J.Hilk

@LinG
the interesting part

// INSERT CUSTOM GRID COMPONENT HERE

you don't show.
My guess is, your Grid resizes to the actual width and hight of the flickable, and not the contentWidth & height

LinG

@Pradeep-P-N Thank you for your time, your example also works fine for me. I made the mistake of incorrectly specifying the contentWidth and contentHeight thus limiting the view of the content... my bad... Have a great day!

@J-Hilk thank you for taking the time to look at my example, I found the issue. Have a great day!

Pradeep P N

Hi @LinG
Cool. The contentHeight and contentWidth are important for

Flickable {}

Have a great day too.