how to make dynamic rectangles scrollable

[Mandeep.Chaudhary]

hi,

I am trying to create dynamic custom rectangles from another qml file named OrderBar.

I am creating the number of these via fuction.

Everything is working fine but problem is that when height of screen finishes another rectangles drawn at the bottom are not visible how to make it scrollable so that i can scroll down and see them.

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5

Window {
    id : main
    visible: true
    width: 640
    height: 480
    title: qsTr("Khanna App")

    Component {
        id: orderBarObj;
        OrderBar { }
    }

    function addObj (a) {
        var i;
        var x = 0;
        var y = 0;

        var margin = 20

        var items = Math.floor(width / 100)

        console.log(items)

        for(i = 0; i < a ; i ++)
        {
            if((i%items == 0))
            {
                y += 1
                x = i
            }

            var button1 = orderBarObj.createObject (main, {
                                                        "color"  : "yellow",
                                                        "width"  : (width/items)  - margin,
                                                        "height" : (width/items)  - margin,
                                                        "x"      : margin/2 + ((i-x)*(width/items)),
                                                        "y"      : margin/2  + y*(width/items +margin),
                                                        "table" : i,
                                                        "price" :121.5
                                                    });

            console.log(main.width)
            console.log(x)
            console.log(20 + ((i-x)*100))
            console.log(20 + y*120)
            console.log("####")
        }

    }

    Component.onCompleted: addObj(50)
}


[mrjj]

Hi
I dont know its thats an option for you but maybe you could use a ScrollView ?
https://doc.qt.io/qt-5/qml-qtquick-controls2-scrollview.html#details