How to Layout Contents of Window when Resizing window width?

Question

Suppose I have a Grid, shows 4X4(4 rows and 4 columns), when I reduce the width by half, It should layout as 2X8. I search in Google, and I god some idea that, it can be achieve through calls of JavaScript to change dynamically, but I have unable to get the window size after re-size.

    import QtQuick 2.2

    Grid{
        id:root
        property int rootWidth:400//Created type to change using javascript
        property int rootHeight:400//Created type to change using javascript
        width:rootWidth
        height:rootHeight

        property int myRows: 4//Initially 4X4
        property int myColumns: 4
        rows: myRows
        columns: myColumns
        onWidthChanged:{ widthChange()}//Executed javascript, when width changes.
        Repeater{
            model:16
            //Fixed Rectangle.
            Rectangle{radius:36;width:100;height:100;color:"blue"}

        }
        function widthChange(){
            //It seems, this condition failes, How to get the width of the
            //window, after resizing the window?
            if( root.width > 200 & root.width <400 )
            {
            //When width is less than 400 and greater than 200, set Grid as 2X4.
            root.myColumns = 2;
            root.myRows = 8;
            root.rootWidth=200;
                root.rootHeight= 800;
            }
        }
    }

What I am try to achieve is, I need to fit the content( Fixed Rectangles ) in Grid/or any with scroll-bar according to device width. Can anyone help at least giving some hinds So i can work on this?, Appreciate if you know any alternative ways to achieve this?

Answer 1

According to the question I've assumed that you also need the ScrollBars, hence I've added the ScrollView. Even if we remove the latter, the general approach still applies.

The keypoint is in dynamically recalculate the number of necessary/available rows and colums. Then we can exploit QML binding and directly set the expressions to the rows and columns properties so that, when size changes, the values change accordingly. The resulting code is highlighted in the example below with 1) and 2).

import QtQuick 2.2
import QtQuick.Controls 1.2
import QtQuick.Window 2.2

Window{
    id: root
    width: 300
    height: 300
    visible:  true

    ScrollView {
        id: scroller
        width: parent.width
        height: parent.height
        Grid{
            // 1) calculate enough columns to fill the width
            columns: Math.floor(scroller.width / 100)  
            // 2) calculate required rows to contain all the elements
            rows: Math.ceil(model.count / columns)  

            Repeater{
                id: model
                model:16
                Rectangle{radius:36;width:100;height:100;color:"blue"}
            }
        }
    }
}