QML知识笔记（三）

概述

QML提供了定位器和锚点来简化元素的布局，使之更加容易确定各子元素间的相对位置。

定位器

行

将被定位的元素成员都放置在一行的位置

Row{
            x:25
            y:25
            spacing: 10 //元素间距为10像素
            layoutDirection: Qt.RightToLeft //元素从右向左排列
            RedRectangle{}		//自定义组件
            BlueRectangle{}		//自定义组件
            GreenRectangle{}	//自定义组件
        }

列

将被定位的元素成员都放置在一列的位置

Column{
            x:25
            y:120
            spacing: 10 //元素间距为10像素
            RedRectangle{}
            BlueRectangle{}
            GreenRectangle{}
        }

网格

将元素成员排列为一个网格

Grid{
            x:140
            y:120
            spacing: 5 //元素间距为5像素
            columns: 3
            RedRectangle{}
            BlueRectangle{}
            GreenRectangle{}
            RedRectangle{}
            BlueRectangle{}
            GreenRectangle{}
            RedRectangle{}
            BlueRectangle{}
            GreenRectangle{}
        }

流定位

将元素以流的形式显示出来，添加到Flow里的元素，会根据显示区尺寸变化动态地调整其布局。

Flow{
            anchors.fill: parent
            anchors.margins: 15 //元素与窗口左上角边距为15像素
            spacing: 5
            RedRectangle{}
            BlueRectangle{}
            GreenRectangle{}
            RedRectangle{}
            BlueRectangle{}
            GreenRectangle{}
        }

重复器

重复器用于创建大量相似的元素成员，常与其定位器结合起来使用。

Grid{
            x:25;y:25
            spacing: 4
            //用重复器为Grid添加元素成员
            Repeater{
                model: 16   //创建的成员个数
                Rectangle{
                    width: 45;height: 45
                    color: "aqua"
                    Text{   //显示矩形编号
                        anchors.centerIn: parent
                        color: "black"
                        font.pointSize: 20
                        text: index     //为每个子元素注入一个index属性，作为当前的循环索引
                    }
                }
            }
        }

锚点

每个元素都可以认为有一组无形的锚线，只能在父子兄弟元素之间使用锚，而且基于锚的布局不能与绝对的位置定义混合使用，否则会出现不确定的结果。