QML layout01

import QtQuick 2.0
import QtQuick.Window 2.0
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.1

Window {
    id: mianWindow

    width: 400
    height: 600
    visible: true

    Rectangle {
        anchors.fill: parent
        color: '#505050'

        RowLayout {  // 行布局器
            anchors.top: parent.top
            anchors.topMargin: 5
            anchors.left: parent.left
            anchors.leftMargin: 5
            width: 500

            Rectangle {
                color: 'teal'
                //如果此属性为true，则项目将尽可能宽，同时考虑给定的约束。如果属性为false，
                //则项的固定宽度将设置为首选宽度。默认值为false，但布局本身除外，默认值为true。
                Layout.fillWidth: true  // 自动扩展，相当于QWidget的Expandin
                //此属性保留版面中项目的最小宽度。默认值是项目的隐式最小宽度。

                //如果项目是布局，则隐式最小宽度将是布局在没有任何项目收缩到最小宽度以下时可以具有的最小宽度。任何其他项的隐式最小宽度为0
                Layout.minimumWidth: 50
                //此属性保留版面中项目的首选宽度。如果宽度是首选宽度，则将忽略宽度1。默认值为-1。
                Layout.preferredWidth: 100
                //                Layout.maximumWidth: 800
                Layout.minimumHeight: 150
                Text {
                    anchors.centerIn: parent
                    text: parent.width + 'x' + parent.height
                }
            }

            Rectangle {
                color: 'plum'
                Layout.fillWidth: false
                Layout.minimumWidth: 100
                Layout.preferredWidth: 100
                Layout.preferredHeight: 100
                Text {
                    anchors.centerIn: parent
                    text: parent.width + 'x' + parent.height
                }
            }
        }

        ColumnLayout {
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 5
            anchors.left: parent.left
            anchors.leftMargin: 5
            height: 300

            Rectangle {
                color: 'teal'
                Layout.fillHeight: true
                Layout.minimumHeight: 50   // 最小高度
                Layout.preferredWidth: 200  // 首选宽度
                Layout.preferredHeight: 100
                Layout.maximumWidth: 250
                //                Layout.maximumHeight: 150  // 200 * 150
                Text {
                    anchors.centerIn: parent

                    text: parent.width + 'x' + parent.height
                }
            }

            Rectangle {
                color: 'plum'
                Layout.fillHeight: false
                Layout.minimumWidth: 10
                // 最小值小于首选  取首选


                Layout.preferredWidth: 100
                Layout.preferredHeight: 120
                //horizontalCenter: parent.horizontalCenter
                Text {
                    anchors.centerIn: parent
                    text: parent.width + 'x' + parent.height
                }
            }
        }

        GridLayout {
            id:grid
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 5
            anchors.right: parent.right
            anchors.rightMargin: 5
            flow: GridLayout.LeftToRight
            height: 200

            columns: 3 // 3 列

            Rectangle {
                color: 'red'
                Layout.columnSpan: 2  // 此属性允许您指定GridLayout中项目的列跨距。
                /*
                    此属性允许您指定项在其所占单元格内的对齐方式。

                    默认值为0，这意味着它将Qt.AlignVCenter| 左对齐

                    有效的对齐方式是以下标志的组合：

                    Qt:：左对齐

                    Qt:：对齐中心

                    Qt:：右对齐

                    Qt:：对齐顶部

                    Qt:：AlignVCenter

                    Qt:：对齐底部

                    Qt:：对齐基线
                */

                Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
                width: 50
                height: 50
            }

            Rectangle {
                color: 'yellow'
                width: 50
                height: 50
            }

            Rectangle {
                color: 'blue'
                Layout.rowSpan: 2 // 占两行
                width: 50
                height: 50
            }

            Rectangle {
                color: 'green'
                width: 50
                height: 50
            }
        }
    }
}