《QmlBook》笔记（4）：定位元素示例

RedSquare.qml

import QtQuick 2.0

Rectangle
{
    width: 48
    height: 48
    color: "#ea7025"
    border.color: Qt.lighter(color)
}

1、列定位器 Column

Window
{
    id:root
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Column //列定位器 其中的组件排成一列
    {
        id: column
        spacing: 8 //元素间隔
        anchors.top: parent.top
        RedSquare { }
        RedSquare { width: 96 }
        RedSquare { }
    }
}

2、行定位器 Row

    Row//行定位器 其中的组件排成一行
    {
        id: row
        anchors.centerIn: parent
        spacing: 20
        RedSquare { }
        RedSquare { }
        RedSquare { }
    }

3、网格定位器 Grid

    Grid
    {
        id: grid
        rows: 2
        columns: 4
        anchors.top: parent.top
        spacing: 8
        x:100
        RedSquare { }
        RedSquare { }
        RedSquare { }
        RedSquare { }
        RedSquare { }
        RedSquare { }
        RedSquare { }
        RedSquare { }
    }

 

import QtQuick 2.9
import QtQuick.Window 2.2

Window
{
    id:root
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    property variant colorArray: ["#00bde3", "#67c111", "#ea7025"]
    Grid
    {
        anchors.fill: parent
        anchors.margins: 8
        spacing: 4
        Repeater//重复元素
        {
            model: 16
            Rectangle
            {
                width: 156;
                height: 156
                property int colorIndex: Math.floor(Math.random()*3)//0-2随机数
                color: root.colorArray[colorIndex]
                border.color: Qt.lighter(color)
                Text
                {
                    anchors.centerIn: parent
                    color: "#f0f0f0"
                    text: "单元格" + index
                }
            }
        }
    }
}

 

4、流定位器 Flow

    Flow
    {
        anchors.fill: parent
        anchors.margins: 20
        spacing: 20
        RedSquare { }
        RedSquare { }
        RedSquare { }
        RedSquare { }
        RedSquare { }
        RedSquare { }
        RedSquare { }
        RedSquare { }
        RedSquare { }
        RedSquare { }
        RedSquare { }
        RedSquare { }
        RedSquare { }
        RedSquare { }
        RedSquare { }
    }