第14章：QML之Layout

1，布局
包括Row，Column，Grid，Flow，Repeater
2，源码

import QtQuick 2.6

Rectangle {
    property alias mouseArea: mouseArea


    width: 800
    height: 1200

    MouseArea {
        id: mouseArea
        anchors.fill: parent
    }

    Row {                                  //行
        x: 225
        y: 125
        spacing: 10                        //元素间距
        layoutDirection: Qt.RightToLeft    //元素从右向左排列
        //以下添加Row定位的元素成员
        RetRectangle{}
        BlueRectangle{}
        GreenRectangle{}
    }

    Column{                                 //列
        x:225
        y:225
        spacing: 2
        //在以下添加Column的成员元素
        RetRectangle{}
        BlueRectangle{}
        GreenRectangle{}
    }

    Grid {                                 //网格
        x:500
        y:125
        columns: 2                         //每行2个元素，通过row和Column自行定义个数
        spacing: 5
        //在以下添加Column的成员元素
        RetRectangle{}
        BlueRectangle{}
        GreenRectangle{}
    }

    Flow{                                  //流布局：会根据显示区尺寸变化动态第调整其布局
                                           //它及可以从左到右也可以从右到左
        anchors.fill: parent
        anchors.margins: 15                //元素与左上角边距为350像素
        spacing: 3
        //在以下添加Flow的成员元素
        RetRectangle{}
        BlueRectangle{}
        GreenRectangle{}
    }


    Grid{                                 //Repeater重复器
        x:5
        y:125

        spacing: 4

        Repeater{                                //重复器
            model: 16                            //要复制的元素个数
            Rectangle{                           //成员皆为矩形元素
                width: 48; height: 48

                color: "aqua"

                Text {                          //显示矩形编号
                    anchors.centerIn: parent
                    color: "black"
                    font.pointSize: 20
                    text: index                 //会为每一个子元素注入一个index属性，作为当前循环
                }
            }
        }


    }
}

import QtQuick 2.0

Rectangle{
    width: 48
    height: 62
    color: "blue"

    border.color: Qt.lighter(color)   //边框色设置为比例填充色
}

3，效果