调整窗口宽度大小时如何布局窗口内容

Question

假设我有一个网格，显示 4X4（4 行和 4 列），当我减少 宽度减半，它应该布局为 2X8。我在谷歌搜索，我 上帝的一些想法，它可以通过调用JavaScript来实现 动态更改，但之后我无法获取窗口大小 调整大小。

    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;
            }
        }
    }

我试图实现的是，我需要根据设备宽度将内容（固定矩形）放入网格/或任何带有滚动条的内容。任何人都可以帮助至少给一些后腿所以我可以解决这个问题？，如果您知道实现这一目标的任何其他方法，请表示感谢？

Answer 1

根据问题，我假设您还需要ScrollBar s，因此我添加了ScrollView。即使我们删除后者，一般方法仍然适用。

关键点在于动态重新计算必要/可用行和列的数量。然后我们可以利用 QML 绑定并直接将表达式设置为 rows 和 columns 属性，以便在大小更改时，值也会相应更改。生成的代码在下面的示例中突出显示，并带有 1) 和 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"}
            }
        }
    }
}