关于可视QML类型的四种布局
开篇
在qml中设计应用软件界面的时候，提供了很多工具（详见《qt quick开发工具大杂烩》）来布局一个界面中的组成元素，几乎都是“所见即所得”。我们知道item类型是qt quick中所有可视元素的基本类型，如下文档：
所以在对可视qml类型布局时，我们实际操作的是item或者是其派生类型。实际使用中，有四种方法可以来布局：
（1）手动定位
（2）anchor
（3）定位器
（4）layout布局类型
手动进行定位
通过设置item的x，y属性，可将item放置在特定的x,y坐标上。这种方法会根据视觉坐标系统规则设置item相对于其父节点左上角的位置。
在实际使用中，该方法结合属性绑定（不指定属性为常量值），通过将x和y坐标设置为合适的属性绑定，可以实现相对定位。
在qt creator设计模式下，我们可以在右上角处：
设置x、y、width和height定位属性。
使用anchor定位
item类型提供anchor到其他item类型的功能。每个item有7条锚线：左、右、垂直中心、顶部、底部、基线和水平中心。三条垂直锚线可以锚定到另一物品的三条垂直锚线中的任意一条上，四条水平锚线可以锚定到另一item的水平锚线上。
在qt design studio中可以在每个item的poperties一栏设置anchor，如下图所示：
使用定位器定位
定位器是一个管理声明式用户界面中项位置的容器项。定位器的行为与标准qt小部件中使用的布局管理器差不多是一样。
qml中提供的定位器有以下几种：
名称 含义
column 并排放置子节点，必要时进行包裹
grid 以网格的形式定位子元素
layoutmirroring 用于镜像布局
positioner 用于提供附加属性，这些属性包含项目在定位器中的位置的详细信息
row 将子元素排成一行
在qml中，定位器是以qml类型组件的方式提供的。在qtcreator的设计模式下，默认是添加了该组件，我们可以在其左下角点击拖动使用：
使用layout布局类型定位
layout类型的功能与定位器类似，但是布局类型允许进一步细化或限制布局。布局类型有以下特点：
（1）可以设置文本和其他项的对齐方式。
（2）会自动调整分配的应用程序区域的大小和进行自动填充。
（3）可以设置大小约束（如最小或最大尺寸）。
（4）可以设置布局中项目之间的间距。
注意：qt quick layout是在qt 5.1中引入的，需要qt quick 2.1或以上版本的支持。
layout类型有以下几种：
名称 含义
columnlayout 与gridlayout相同，但只有一个列
gridlayout 在网格中动态排列的项
layout 为加入到gridlayout、rowlayout或columnlayout上的项提供附加属性
rowlayout 与gridlayout相同，但只有一行
stacklayout 每次只有一个项可见的堆叠布局
在 qt design studio中qml types一栏可以找到支持的layout类型：
尾
在qml应用开发中，我们几乎都是使用qtcreator的设计模式或者qt design studio来对应用软件界面的组成元素进行布局。直接使用开发工具提供的图形界面接口操作qml文档即可，不用手动去编写和修改代码，这一点非常方便，效率也非常高。
本文所述的四种qml可视元素布局方法，在实际开发中，都会使用到，更多时候是几种组合在一起去完成一个应用界面的布局，也有单独使用的情况。
实现可信的5G系统_安全是头等大事
利用Project PAI区块链解决人工智能的数据与算力问题
AMD暗示未来CPU核心或达到128核256线程
AI和通信网络之间的结合还存在三大阻碍需要解决
通过扩频调频技术如何将频谱能量分配到频谱中
关于可视QML类型的四种布局
IR FastIRFET系列为DC-DC同步降压应用 提供行业领先效率
后备数据寄存器概述及读写操作
智能扫地机器人的选购技巧及品牌介绍
智慧安防对于智慧城市发展有没有帮助
深度分析：智能照明百亿赛道，Yeelight易来如何做到智能照明和定制照明双C位
滨海瞄准重点领域，推动人工智能产业补链强链
联智通达科技LX-H61D3嵌入式主板介绍
地表水地下水微型水质监测站多参数微型水质在线监测站
OFF延时和ON延时定时器的区别
2018年技术主流：AI与机器学习问鼎
便携式重金属检测仪的特点
三星新发布HBM2E存储芯片，其代号Flashbolt
S3C2410 LCD控制器的外部管脚图和内部方框图
基于单片机AT89S51的数字电压表设计实现
在qml中设计应用软件界面的时候，提供了很多工具（详见《qt quick开发工具大杂烩》）来布局一个界面中的组成元素，几乎都是“所见即所得”。我们知道item类型是qt quick中所有可视元素的基本类型，如下文档：
所以在对可视qml类型布局时，我们实际操作的是item或者是其派生类型。实际使用中，有四种方法可以来布局：
（1）手动定位
（2）anchor
（3）定位器
（4）layout布局类型
手动进行定位
通过设置item的x，y属性，可将item放置在特定的x,y坐标上。这种方法会根据视觉坐标系统规则设置item相对于其父节点左上角的位置。
在实际使用中，该方法结合属性绑定（不指定属性为常量值），通过将x和y坐标设置为合适的属性绑定，可以实现相对定位。
在qt creator设计模式下，我们可以在右上角处：
设置x、y、width和height定位属性。
使用anchor定位
item类型提供anchor到其他item类型的功能。每个item有7条锚线：左、右、垂直中心、顶部、底部、基线和水平中心。三条垂直锚线可以锚定到另一物品的三条垂直锚线中的任意一条上，四条水平锚线可以锚定到另一item的水平锚线上。
在qt design studio中可以在每个item的poperties一栏设置anchor，如下图所示：
使用定位器定位
定位器是一个管理声明式用户界面中项位置的容器项。定位器的行为与标准qt小部件中使用的布局管理器差不多是一样。
qml中提供的定位器有以下几种：
名称 含义
column 并排放置子节点，必要时进行包裹
grid 以网格的形式定位子元素
layoutmirroring 用于镜像布局
positioner 用于提供附加属性，这些属性包含项目在定位器中的位置的详细信息
row 将子元素排成一行
在qml中，定位器是以qml类型组件的方式提供的。在qtcreator的设计模式下，默认是添加了该组件，我们可以在其左下角点击拖动使用：
使用layout布局类型定位
layout类型的功能与定位器类似，但是布局类型允许进一步细化或限制布局。布局类型有以下特点：
（1）可以设置文本和其他项的对齐方式。
（2）会自动调整分配的应用程序区域的大小和进行自动填充。
（3）可以设置大小约束（如最小或最大尺寸）。
（4）可以设置布局中项目之间的间距。
注意：qt quick layout是在qt 5.1中引入的，需要qt quick 2.1或以上版本的支持。
layout类型有以下几种：
名称 含义
columnlayout 与gridlayout相同，但只有一个列
gridlayout 在网格中动态排列的项
layout 为加入到gridlayout、rowlayout或columnlayout上的项提供附加属性
rowlayout 与gridlayout相同，但只有一行
stacklayout 每次只有一个项可见的堆叠布局
在 qt design studio中qml types一栏可以找到支持的layout类型：
尾
在qml应用开发中，我们几乎都是使用qtcreator的设计模式或者qt design studio来对应用软件界面的组成元素进行布局。直接使用开发工具提供的图形界面接口操作qml文档即可，不用手动去编写和修改代码，这一点非常方便，效率也非常高。
本文所述的四种qml可视元素布局方法，在实际开发中，都会使用到，更多时候是几种组合在一起去完成一个应用界面的布局，也有单独使用的情况。
实现可信的5G系统_安全是头等大事
利用Project PAI区块链解决人工智能的数据与算力问题
AMD暗示未来CPU核心或达到128核256线程
AI和通信网络之间的结合还存在三大阻碍需要解决
通过扩频调频技术如何将频谱能量分配到频谱中
关于可视QML类型的四种布局
IR FastIRFET系列为DC-DC同步降压应用 提供行业领先效率
后备数据寄存器概述及读写操作
智能扫地机器人的选购技巧及品牌介绍
智慧安防对于智慧城市发展有没有帮助
深度分析：智能照明百亿赛道，Yeelight易来如何做到智能照明和定制照明双C位
滨海瞄准重点领域，推动人工智能产业补链强链
联智通达科技LX-H61D3嵌入式主板介绍
地表水地下水微型水质监测站多参数微型水质在线监测站
OFF延时和ON延时定时器的区别
2018年技术主流：AI与机器学习问鼎
便携式重金属检测仪的特点
三星新发布HBM2E存储芯片，其代号Flashbolt
S3C2410 LCD控制器的外部管脚图和内部方框图
基于单片机AT89S51的数字电压表设计实现