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

how to make dynamic rectangles scrollable



  • 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)
    }
    

    ![alt text](WhatsApp Image 2020-01-05 at 14.29.53.jpeg image url)


  • Lifetime Qt Champion

    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


Log in to reply