开篇
在QML中设计应用软件界面的时候,提供了很多工具(详见《Qt Quick开发工具大杂烩 》)来布局一个界面中的组成元素,Item类型是Qt Quick中所有可视元素的基本类型,如下文档可见:
所以在对Item布局时,我们实际操作的是Item或者是其派生类型。实际使用中,有四种方法可以来布局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中也可以使用定位器和Layout类型:
总结
在实际QML应用开发中,我们几乎都是使用QtCreator的设计模式或者Qt Design Studio来对应用软件的组成元素进行布局。直接使用开发工具提供的图形界面接口操作qml文档即可,不用手动去编写和修改代码,这一点非常方便,效率也非常高。
本文所述的四种QML应用组成元素的布局方法,在实际开发中,都会使用到,更多的时候是几种组合在一起去完成一个应用界面的布局,也有单独使用某种布局方法的情况出现。文章来源:https://www.toymoban.com/news/detail-404794.html
♥搜索关注『嵌入式小生』VX公众号,获取更多精彩内容♥文章来源地址https://www.toymoban.com/news/detail-404794.html
到了这里,关于【QML】在QML中布局的四种方法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!