QML小程序：定位元素

实现4中定位器布局

行(Row)定位器
列(Column)定位器
网格(Grid)定位器
流(Flow)定位器
演示图如下：

main.qml

import QtQuick 2.12
import QtQuick.Window 2.12

//实现4种定位器布局
//行(Row)定位器
//列(Column)定位器
//网(Grid)格定位器
//流(Flow)定位器

//窗口
Window {
    visible: true   //窗口可见
    width: 580      //窗口宽度
    height: 680     //窗口高度
    title: qsTr("Positioning")  //窗口标题

    //深色矩形框
    DarkRectangle {

        //文本
        Text {
            anchors.top: parent.top //锚定到父部件顶部
            anchors.horizontalCenter: parent.horizontalCenter   //锚定到父部件水平居中位置
            color: "white"  //文本颜色
            text: qsTr("Column定位器") //文本内容
        }

        //列定位器
        Column {
            anchors.centerIn: parent    //定位器中元素居中
            spacing: 8  //定位器中元素间隔8个像素
            RedRectangle { }    //红色矩形框
            GreenRectangle { width: 96 }    //绿色矩形框
            BlueRectangle { }   //蓝色矩形框
        }
    }

    //亮色矩形框
    BrightRectangle {
        x: 0; y: 250    //矩形框位置

        //文本
        Text {
            anchors.top: parent.top //锚定到父部件顶部
            anchors.horizontalCenter: parent.horizontalCenter   //锚定到父部件水平居中位置
            color: "black"  //文本颜色
            text: qsTr("Row定位器")    //文本内容
        }

        //行定位器
        Row {
            anchors.centerIn: parent    //锚定到父部件的中央
            spacing: 20 //行定位器中元素之间的间隔：20
            BlueRectangle { }   //蓝色矩形框
            GreenRectangle { }  //绿色矩形框
            RedRectangle { }    //红色矩形框
        }
    }

    //亮色矩形框
    BrightRectangle {
        x:130; y:0  //亮色矩形框位置
        width: 160  //亮色矩形框宽度
        height: 160 //亮色矩形框高度

        //文本
        Text {
            anchors.top: parent.top //锚定到父部件顶部
            anchors.horizontalCenter: parent.horizontalCenter   //锚定到父部件水平居中位置
            color: "black"  //文本颜色
            text: qsTr("Grid定位器")   //文本内容
        }

        //网格定位器
        Grid {
            rows: 2 //网格定位器总行数：2
            columns: 2  //网格定位器总列数：2
            anchors.centerIn: parent    //锚定到父部件的中央
            spacing: 8  //网格定位器元素之间间隔：8
            RedRectangle { }    //红色矩形框
            GreenRectangle { }  //绿色矩形框
            BlueRectangle { }   //蓝色矩形框
            RedRectangle { }    //红色矩形框
        }

    }

    //亮色矩形框
    BrightRectangle {
        x:300; y: 0 //矩形框位置
        width: 160  //矩形框宽度
        height: 160 //矩形框高度

        //文本
        Text {
            anchors.top: parent.top //锚定到父部件顶部
            anchors.horizontalCenter: parent.horizontalCenter   //锚定到父部件水平居中位置
            color: "black"  //文本颜色
            text: qsTr("Flow定位器")//文本内容
        }

        //流定位器
        Flow {
            anchors.fill: parent    //锚定填充整个父部件
            anchors.margins: 20 //锚定边框间隔：20
            spacing: 20 //元素间间隔：20
            RedRectangle { }    //红色矩形框
            BlueRectangle { }   //蓝色矩形框
            GreenRectangle { }  //绿色矩形框
        }
    }

    //深色矩形框
    DarkRectangle {
        id:darkRect //矩形框id
        x:0; y:380  //矩形框位置
        width: 252  //矩形框宽度
        height: 252 //矩形框高度
        property  variant colorArray: ["red", "green", "blue"]  //颜色数组

        Grid {
            anchors.fill: parent    //锚定填充整个父部件
            anchors.margins: 8  //锚定边框间距：8
            spacing: 4  //元素间的间隔：4

            //重复元素
            Repeater {
                model: 16   //重复16次

                //矩形框
                Rectangle {
                    width: 56   //矩形框宽度
                    height: 56  //矩形框高度
                    property int colorIndex: Math.floor(Math.random()*3)    //随机产生颜色索引值
                    color: darkRect.colorArray[colorIndex]  //矩形框颜色
                    border.color: Qt.lighter(color) //矩形框边框颜色

                    //文本
                    Text {
                        anchors.centerIn: parent    //文本锚定到中央
                        color:  "white" //文本颜色
                        text: "Cell " + index   //文本内容
                    }
                }
            }
        }
    }

    //文本
    Text {
        x:0; y:darkRect.y + darkRect.height + 10    //文本位置
        text:  "重复(Repeater)元素" //文本内容
        color: "black"  //文本颜色
    }
}

BlueRectangle.qml

import QtQuick 2.0

//组件，蓝色矩形

//矩形框元素
Rectangle {
    width: 48   //矩形框宽度
    height: 48  //矩形框高度
    color: "blue"    //矩形框颜色
    border.color: Qt.lighter(color) //矩形框边框颜色
}

BrightRectangle.qml

import QtQuick 2.0

//组件，亮色矩形

Rectangle {
    width: 400  //矩形框宽度
    height: 120 //矩形框高度
    color: "gray"   //矩形框颜色
}

DarkRectangle.qml

import QtQuick 2.0

//组件，黑色矩形

//矩形框元素
Rectangle {
    width: 120   //矩形框宽度
    height: 240  //矩形框高度
    color: "black"    //矩形框颜色
    border.color: Qt.lighter(color) //矩形框边框颜色
}

GreenRectangle.qml

import QtQuick 2.0

//组件，绿色矩形

//矩形框元素
Rectangle {
    width: 48   //矩形框宽度
    height: 48  //矩形框高度
    color: "green"    //矩形框颜色
    border.color: Qt.lighter(color) //矩形框边框颜色
}

RedRectangle.qml

import QtQuick 2.0

//组件，红色矩形

//矩形框元素
Rectangle {
    width: 48   //矩形框宽度
    height: 48  //矩形框高度
    color: "red"    //矩形框颜色
    border.color: Qt.lighter(color) //矩形框边框颜色
}