QT之QML布局相关总结

使用QML有助于提高界面编写效率，对付界面开发来说，页面如何布局是一个绕不开的点，本文总结一下QML中常用的一些和布局相关的内容。

1.手动定位

2.坐标绑定定位

3.锚定位

4.布局定位器

5.布局管理器

6.其他布局相关

[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
}