实现控件跟随窗口大小变化自适应调整位置

利用Qt Design Editor 和 布局实现控件灵活布局

需要实现子控件随着窗口大小调整居中，需要使用到Layout，主要有ColumnLayout、GridLayout、RowLayout和StackLayout

下面我主要列举RowLayout的使用：

需要将红、蓝、白和黄组成的整体居中，并且随着窗口大小调整，代码如下：

import QtQuick 2.0
import QtQuick.Window 2.12
import QtQuick.Layouts 1.11 // 使用qml的Layout需要导入QtQuick.Layouts组件

Window  {
    visible: true
    width: 1400
    height: 400

    Rectangle {
        id: item1
        anchors.fill: parent // 填充父窗口
        color: "gray" 
		// 水平布局
        RowLayout {
            id: rowLayout
            anchors.fill: parent
            // 相当于qt widget里的spacingItem，可以自动伸缩
            Item { 
                Layout.fillWidth:true 
            }
            Rectangle {
                id: rectangle
                width: 200
                height: 200
                color: "red"
            }

            Rectangle {
                id: rectangle1
                width: 200
                height: 200
                color: "blue"
            }

            Rectangle {
                id: rectangle2
                width: 200
                height: 200
                color: "white"
            }

            Rectangle {
                id: rectangle3
                width: 200
                height: 200
                color: "yellow"
            }
            Item {
                Layout.fillWidth:true
            }
        }

    }
}

实现效果如下：