使用QML有助于提高界面编写效率，对付界面开发来说，页面如何布局是一个绕不开的点，本文总结一下QML中常用的一些和布局相关的内容。
目录
[6.1 弹簧功能](#6.1 弹簧功能)
[6.2 implicitWidth，implicitHeight 和 width，height](#6.2 implicitWidth，implicitHeight 和 width，height)
[6.3 QML常见元素](#6.3 QML常见元素)
[6.4 qml 如何设置窗口大小为自适应](#6.4 qml 如何设置窗口大小为自适应)
1.手动定位
设置x，y的值
特点：常用于静态页面
2.坐标绑定定位
x,y为绑定的表达式
特点：具有动态性，有一定性能开销
3.锚定位
使用比较多，性能较好
anchors（锚）布局属性总结
anchors属性分为三部分：anchorLine margin offset
1.anchorline
是anchors布局的基础，anchorline、bottom、
left、right、horizontalCenter、verticalCenter和baseline七条。
一个元素的AnchorLine和另外一个元素的AnchorLine进行对齐
2.margin
margin分为topMargin bottomMargin leftMargin rightMargin，分别表示上下左右的边距
3.offset
anchors布局有七条anchorline，margin有四个，四个margin对应四个anchorline，
另外的三个anchorline还需要进一步调整，这就是offset的作用，offset有horizontalCenterOffset、
verticalCenterOffset和baselineOffset
4.其他特殊属性
anchors.fill和anchors.centerIn，分别表示填满元素和在元素中居中。两个属性的取值是Item
子元素宽度：childrenRect.width
4.布局定位器
Row（行定位器）
Column（列定位器）
Grid（网格定位器）
Flow（流式定位器）
5.布局管理器
RowLayout（行布局管理器）
ColumnLayout（列布局管理器）
GridLayout（网格布局管理器）
6.其他布局相关
6.1 弹簧功能
类似QT中qt widget里的spacingItem（弹簧功能）
Item {
Layout.fillWidth:true
}
6.2 implicitWidth，implicitHeight 和 width，height
width、height只是设置了该控件的框架的宽度和高度，但其中的内容的大小的值是由implicitWidth/implicitHeight属性表示的。一个控件的width和height在控件初始化的时候便确定好了，而implicitWidth/implicitHeight是跟随着控件包含的内容的变化而变化的。
6.3 QML常见元素
Item元素
Item是所有可视化元素的基础对象，所有其它的可视化元素都继承自Item。它自身不会有任何绘制操作，但是定义了所有可视化元素共有的属性：
Geometry(几何属性)------x,y(坐标)定义了元素左上角的位置，width，height(长和宽)定义元素的显示范围，z(堆叠次序)定义元素之间的重叠顺序。
Layout handing(布局操作)------anchors(锚定)，包括左(left)、右(right)、上(top)、下(bottom)，水平与垂直居中(vertical center，horizontal center)，与margins(间距)一起定义了元素与其它元素之间的位置关系。
Key handling(按键操作)------附加属性key(按键)和keyNavigation(按键定位)属性来控制按键操作，处理输入焦点(focus)可用操作。
缩放(scale)和rotate(旋转)转换，通用的x，y，z属性列表转换(transform)，旋转基点设置(transformOrigin)。
Visual(可视化)------不透明度(opacity)控制透明度，visible(是否可见)控制元素是否显示，clip(裁剪)用来限制元素边界的绘制，smooth(平滑)用来提高渲染质量。
State definition(状态定义)------states(状态列表属性)提供了元素当前所支持的状态列表，当前属性的改变也可以使用transitions(转变)属性列表来定义状态转变动画。
注意Item通常被用来作为其它元素的容器使用，类似HTML中的div。
关于Item元素，可参考如下链接：
https://blog.51cto.com/hongpangzi/5224784#Methods
Rectangle(矩形框元素)
Rectangle是基本元素对象的一个扩展，增加了一个颜色来填充它。它还支持边界的定义，使用border.color(边界颜色)，border.width(边界宽度)来自定义边界。
可以使用radius(半径)属性来创建一个圆角矩形。
Text(文本元素)
Image(图像元素)
source属性提供了图像文件的链接信息，fillMode属性能够控制元素对象的大小调整行为。
MouseArea(鼠标区域元素)
为了与不同的元素交互，通常需要使用MouseArea元素。这是一个矩形的非可视化元素对象，你可以通过它来捕捉鼠标事件。当用户与可视化端口交互时，mouseArea通常被用来与可视化元素对象一起执行命令。
例如鼠标上下左右矩形跟随移动示例：
Rectangle{
//anchors.centerIn: parent
x: parent.width/2
y:parent.height/2
color: "red"
width: 200
height: 200
focus: true
//通过键盘的上下左右键移动元素
Keys.onLeftPressed: x-=10 //按下键盘左键使X轴坐标-10
Keys.onRightPressed: x+=10 //按下键盘右键使X轴坐标+10
Keys.onUpPressed: y-=10
Keys.onDownPressed: y+=10
//通过1和2 键缩放元素
Keys.onDigit1Pressed: scale+=0.2
Keys.onDigit2Pressed: scale-=0.1
}
spacing：用来设置子元素之间水平或者垂直距离
网格布局中有：rowSpacing columnSpacing
rowSpacing属性用来设置各个子元素之间的水平空格距离
columnSpacing属性用来设置各个子元素之间的垂直空格距离。
Grid 网格布局中：有layoutDirection（默认值：Qt.LeftToRight）和flow（默认值：Gird.LeftToRight）
layoutDirection属性决定元素是先放左边还是先放右边，而flow属性决定元素是先填满行还是先填满列。
layoutDirection：该属性设置子元素的排列方向，例如：Qt.RightToLeft
6.4 qml 如何设置窗口大小为自适应
html
import QtQuick 2.0
import QtQuick.Controls 2.12
ApplicationWindow {
visible: true
width: Screen.width * 0.8 // 设置窗口宽度为屏幕宽度的80%
height: Screen.height * 0.8 // 设置窗口高度为屏幕高度的80%
// 或者也可以将width和height属性设置为父级元素的宽高，实现相对布局
// width: parent.width * 0.8
// height: parent.height * 0.8
}