Qml：布局

import QtQuick
import QtQuick.Window
import QtQuick.Layouts
Window
{
    width: 1280
    height: 800
    visible: true
    title: qsTr("Test Layout")
    Rectangle
    {
        id:colroot
        implicitWidth: 300
        implicitHeight: 400
        color: "#EEEEEE"
        ColumnLayout
        {
            anchors.fill: parent
            spacing: 2
            Rectangle
            {
                color:"pink"
                Layout.minimumHeight: 40
                Layout.maximumHeight: 200
                Layout.maximumWidth: 300
                Layout.fillWidth: true
                Layout.fillHeight: true
                Text{anchors.centerIn: parent; text:parent.width +"x"+parent.height}
                MouseArea
                {
                    anchors.fill: parent
                    onClicked:
                    {
                        colroot.width+=10
                        colroot.height+=10
                    }
                }
            }
            Rectangle
            {
                color:"plum"
                Layout.fillWidth: true
                Layout.preferredHeight: 40
                Text{anchors.centerIn: parent; text:parent.width +"x"+parent.height}
                MouseArea
                {
                    anchors.fill: parent
                    onClicked:
                    {
                        colroot.width-=10
                        colroot.height-=10
                    }
                }
            }
            Rectangle
            {
                color:"lightgreen"
                Layout.preferredWidth: 100
                Layout.preferredHeight: 40
                Text{anchors.centerIn: parent; text:parent.width +"x"+parent.height}
            }
        }//ColumnLayout
        Text{text:"ColumnLayout"}
    }//colroot
    Rectangle
    {
        x:310
        id:rowroot
        implicitWidth: 600
        implicitHeight: 400
        color: "#EEEEEE"
        RowLayout
        {
            id:row
            anchors.fill: parent
            spacing: 0  //去掉间隔
            Rectangle
            {
                color:"pink"
                Layout.preferredWidth: 100
                Layout.fillHeight:true
                //放大背景
                MouseArea
                {
                    anchors.fill: parent
                    onClicked:
                    {
                        rowroot.width+=10
                        rowroot.height+=10
                    }
                }
                Text{anchors.centerIn: parent; text:parent.width +"x"+parent.height}
            }
            Rectangle
            {
                color:"lightgreen"
                Layout.fillWidth:true
                Layout.fillHeight:true
                Layout.minimumHeight: 100
                Layout.minimumWidth: 200
                MouseArea
                {
                    anchors.fill: parent
                    onClicked:
                    {
                        row.layoutDirection = (row.layoutDirection +1)%2
                    }
                }
                Text{anchors.centerIn: parent; text:parent.width +"x"+parent.height}
            }
            Rectangle
            {
                color:"plum"
                Layout.alignment: Qt.AlignRight //右对齐
                Layout.preferredWidth: 100
                Layout.fillHeight:true
                //缩小背景
                MouseArea
                {
                    anchors.fill: parent
                    onClicked:
                    {
                        rowroot.width-=10
                        rowroot.height-=10
                    }
                }
                Text{anchors.centerIn: parent; text:parent.width +"x"+parent.height}
            }
        }
        Text{text:"RowLayout"}
    }
    Rectangle
    {
        y:410
        id:gridroot
        implicitWidth: 300
        implicitHeight: 300
        color: "#EEEEEE"
        GridLayout
        {
            columns:3
            rowSpacing:0
            columnSpacing: 0
            //3X3
            Repeater
            {
                model:9
                Rectangle
                {
                    implicitWidth: 100
                    implicitHeight: 100
                    color: "lightgreen"
                    border.color: "pink"
                    border.width: 1
                }
            }
        }//GridLayout
        Text{text:"GridLayout"}
    }//gridroot
    Rectangle
    {
        x:310
        y:410
        id:stackroot
        implicitWidth: 300
        implicitHeight: 300
        color: "#EEEEEE"
        StackLayout
        {
            id:stack
            anchors.fill: parent
            currentIndex: 0 //当前显示哪个界面 从0开始
            Rectangle
            {
                color:"pink"
                Text{anchors.centerIn: parent; text:parent.width +"x"+parent.height}
            }
            Rectangle
            {
                color:"lightgreen"
                Text{anchors.centerIn: parent; text:parent.width +"x"+parent.height}
            }
            Rectangle
            {
                color:"lightblue"
                Text{anchors.centerIn: parent; text:parent.width +"x"+parent.height}
            }
        }//StackLayout
        MouseArea
        {
            anchors.fill: parent
            onClicked:
            {
                stack.currentIndex = (stack.currentIndex+1) % stack.count
            }
        }
    }//stackroot
}