03.qml

import QtQuick

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("2.7 定位器")

    Column {
        RedSquare {}
        RedSquare {}
        RedSquare {}

        spacing: 10 //间隔
    }

    Row {
        RedSquare {}
        RedSquare {}
        RedSquare {}

        spacing: 10
        x: 58
    }

    Flow { //中文是“流”的意思，姑且叫它流式布局吧
        RedSquare {}
        RedSquare {}
        RedSquare {}
        RedSquare {}
        RedSquare {}

        spacing: 10
        anchors.fill: parent //填充父体后，当外框缩小到一定程度元素才会出现自动换行
        anchors.margins: 20
    }

    Grid { //需要指定行数、列数
        RedSquare {}
        RedSquare {}
        RedSquare {}
        RedSquare {}
        RedSquare {}

        spacing: 10
        anchors.fill: parent //填充父体后，当外框缩小到一定程度元素才会出现自动换行
        anchors.margins: 20

        rows: 2
        columns: 3
    }
}

RedSquare.qml

import QtQuick

Rectangle {
    width: 48
    height: 48
    color: "red"
    border.color: Qt.lighter(color) //比color稍浅一些的颜色
}