QT之QML布局相关总结_qml有弹簧这种功能的部件吗

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

目录

1.手动定位

2.坐标绑定定位

3.锚定位

4.布局定位器

4.1 Row（行定位器）

4.2 Column（列定位器）

4.3 Grid（网格定位器）

4.4 Flow（流式定位器）

4.5 Repeater（中继器）重复元素

5.布局管理器

5.1 RowLayout（行布局管理器）

5.2 ColumnLayout（列布局管理器）

5.3 GridLayout（网格布局管理器）

6.其他布局相关

6.1 弹簧功能

6.2 implicitWidth，implicitHeight 和 width，height

6.3 QML常见元素

6.4 qml 如何设置窗口大小为自适应

6.5 常用颜色

7.定位器和布局管理器的区别

---

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

关于显示模型可参考CSS盒子模型理解：

锚定位的常见属性如下：
 

4.布局定位器

锚布局需要一个个地去设置元素的anchors属性，而布局定位器可以很方便地排列多个元素，从而更方便的管理子项的位置。布局定位器是一种容器元素，专门用来管理界面中的其他元素。定位器不会改变它管理的元素的大小，与你使用 Qt Widgets 中的布局管理器的不同，如果希望使用 “自动根据界面尺寸变化调整孩子们的尺寸” 这种特性，可以使用 Qt Quick 中的布局管理器。

4.1 Row（行定位器）

         其子控件宽度或高度为0，则该子控件将不会布局，并且在行中也不可见。 由于行自动将其子项水平放置，因此行中的子项不应设置其x位置，也不应使用left，right，anchor.horizontalCenter，fill或centerIn锚点水平锚定自身。 如果需要执行这些操作，请考虑在不使用Row的情况下放置项目。请注意，“行”中的项目可以使用“定位器”附加属性来访问有关其在“行”中位置的更多信息。当然，在Row中使用锚布局也是可以的，但是只是官方文档不建议这样子，因为这样子没有太大的意。Row 本身是一个 Item ，所以你可以使用锚布局来定位一个 Row。Row 有一个 spacing 属性，用来指定它管理的 Item 之间的间隔。还有一个 layoutDirection 属性，可以指定布局方向，取值为 Qt.LeftToRight 时从左到右放置 Item ，这是默认行为，取值为 Qt.RightToLeft 时从右向左放置 Item。一旦把一个 Item 交给 Row 来管理，那就不要再使用 Item 的 x 、 y 、 anchors 等属性了， Row 会安排得妥妥的。在一个 Row 内的 item，可以使用 Positioner 附加属性来获知自己在 Row 中的更多位置信息。 Positioner 有 index 、 isFirstItem 、 isLastItem 三个属性。

常见属性成员：

 

4.2 Column（列定位器）

     Column 与 Row 类似，不过是在垂直方向上安排它的子 Items 。Column 本身也是一个 Item ，可以使用 anchors 布局来决定它在父 Item 中的位置。 Column 的 spacing 属性描述子 Item 之间的间隔。

4.3 Grid（网格定位器）

      Grid 在一个网格上安置它的子 Items ，它会创建一个拥有很多单元格的网格，足够容纳它所有的子 Items 。Grid 会从左到右、从上到下把它的子 items 一个一个塞到单元格里。 item 默认会被放在一个单元格左上角 (0, 0) 的位置。你可以通过 rows 和 columns 属性设定表格的行、列数。如果你不设置，默认只有四列，而行数则会根据实际的 item 数量自动计算。rowSpacing 和 columnSpacing 指定行、列间距，单位是像素。Grid 的 flow 属性描述表格的流模式，可以取值 Grid.LeftToRight ，这是默认模式，从左到右一个挨一个放置 item，一行放满再放下一行；取值为 Grid.TopToBottom 时，从上到下一个挨一个放置 item，一列放满再放下一列。horizontalItemAlignment 和 verticalItemAlignment 指定单元格对齐方式。默认的单元格对齐方式和 layoutDirection 以及 flow 有关。

4.4 Flow（流式定位器）

      Flow 其实和 Grid 类似，不同之处是它没有显式的行、列数，它会计算自身尺寸和子 item 尺寸来根据需要折行。它的 flow 属性，默认取值 Flow.LeftToRight ，从左到右安排 item ，直到 Flow 本身的宽度被超出时折行；当 flow 取值 Flow.TopToBottom 时，从上到下安排 item ，直到 Flow 本身的高度被超出时开始在下一列上安排 item 。spacing 属性描述 item 之间的间隔。

4.5 Repeater（中继器）重复元素

   通常与定位器一起使用。工作方式像for循环与迭代器模式一样。Repeater有一个模型和一个委托：对于模型中的每个条目，委托都在一个以模型数据为种子的上下文中实例化。中继器项目通常包含在定位器类型（如行或列）中，以直观地定位中继器创建的多个委托项目。删除或动态销毁由Repeater创建的项会导致不可预知的行为。Positioner：定位器类型的对象附着到列、行、流或网格中的顶级子项。它提供的属性允许子项确定其在其父项“列”、“行”、“流”或“网格”的布局中的位置

例如：

import QtQuick 2.0
 
 
Rectangle{
    id:root;
    width: 252;
    height: 252;
    property variant colorArray: ["#00dbe3", "#67bde3", "#ea7025"];
 
    Grid{　　// Row、Column、Flow
        anchors.fill: parent;
        anchors.margins: 8;
        spacing: 4; // 间隔
        Repeater{
            model: 16;　　// 子项目个数
            Rectangle{
                width: 56;
                height: 56;
                property int colorIndex: Math.floor(Math.random()*3);　　// Math.floor(Math.random()*3)生成0~2的随机数
                color: root.colorArray[colorIndex];
                border.color: Qt.lighter(color);
                Text {
                    anchors.centerIn: parent;
                    color: "#f0f0f0";
                    text: "Cell " + index
                }
            }
        }
    }
}

5.布局管理器

      布局管理器是从Qt5开始引入的功能，它的功能比定位器更强大，适合比较复杂的情景，传统的定位器，当窗口或控件发生变化时，控件大小并不能自动适应窗口变化，而布局管理器则可以实现自适应的功能。 Qt Quick 中的布局管理器与 Qt Widgets 中的相似，它与定位器的不同之处在于：布局管理器会自动调整子 Item 的尺寸来适应界面大小的变化。布局管理器的常见属性如下所示：

重点说明：

      布局管理器使用时，布局负责分配其子Items的几何形状, 因此不应指定子Items的width, height, x, y或其他任何可能影响布局的因素(如anchors等)，否则会产生冲突，
导致布局的结果具有不确定性。如果子Item也是布局, 也同样要遵循这个原理. 因此，只有没有父布局的布局才能具有“anchors.fill：parent;”。Layout types允许如下操作：
（1）设置文本和其他项目的对齐方式
（2）自动调整和填充分配的应用程序区域
（3）设置尺寸限制，例如最小或最大尺寸
（4）设置布局内项目之间的间距

5.1 RowLayout（行布局管理器）

5.2 ColumnLayout（列布局管理器）

5.3 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 如何设置窗口大小为自适应

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
}

6.5 常用颜色

红色（red）

蓝色（blue）

绿色（green）

高亮（lighter）

黑暗（darker）

7.定位器和布局管理器的区别

（1）QML 中的布局管理器和QWidget的效果相似，与定位器不同的是，布局管理器会自动调整子Item的尺寸来适应界面大小的变化。定位器位器单单把元素组织在一起，并不会根据界面大小，自动调节孩子们的尺寸。使用布局管理器需要导入Layout模块，例如：
import QtQuick.Layouts 1.1

（2）QML里的定位器管理位置（x,y属性），而布局器还会管理项目宽高