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

How to remove bounds of the Flickable qml component?



  • 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

    0_1558623463925_YPvNK.gif

    (This is a duplicate of my post on stackoverflow)



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


  • Moderators

    @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



  • @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!



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

    Flickable {}
    

    Have a great day too.


Log in to reply