【QML】在QML中布局的四种方法

这篇具有很好参考价值的文章主要介绍了【QML】在QML中布局的四种方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

开篇

在QML中设计应用软件界面的时候,提供了很多工具(详见《Qt Quick开发工具大杂烩 》)来布局一个界面中的组成元素,Item类型是Qt Quick中所有可视元素的基本类型,如下文档可见:

【QML】在QML中布局的四种方法

所以在对Item布局时,我们实际操作的是Item或者是其派生类型。实际使用中,有四种方法可以来布局Item:

(1)手动定位

(2)anchor

(3)定位器

(4)Layout布局类型

手动进行定位

通过设置Item的x,y属性,可以将Item放置在特定的x,y坐标上。这种方法会根据视觉坐标系统规则设置Item相对于父节点左上角的位置。

在实际使用中,结合属性绑定(不指定属性为常量值),通过将x和y坐标设置为适当的属性绑定,可以实现相对定位。

在Qt Creator的设计模式下,我们可以在右上角处:

【QML】在QML中布局的四种方法

设置x、y、width和height定位属性。

使用anchor定位

Item类型提供anchor到其他Item类型的功能。每个Item有7条锚线:左、右、垂直中心、顶部、底部、基线和水平中心。三条垂直锚线可以锚定到另一物品的三条垂直锚线中的任意一条上,四条水平锚线可以锚定到另一Item的水平锚线上。

在Qt Design Studio中可以在每个Item的Poperties一栏设置anchor,如下图所示:

【QML】在QML中布局的四种方法

使用定位器定位

定位器是一个管理声明式用户界面中项位置的容器项。定位器的行为与标准Qt小部件中使用的布局管理器差不多是一样。

QML中的定位器有以下几种:

名称 含义
Column 并排放置子节点,必要时进行包裹
Grid 以网格的形式定位子元素
LayoutMirroring 用于镜像布局
Positioner 用于提供附加属性,这些属性包含项目在定位器中的位置的详细信息
Row 将子元素排成一行

在QML中,定位器是以QML类型组件的方式提供的。在QtCreator的设计模式下,默认是添加了该组件,我们可以在其左下角点击拖动使用:

【QML】在QML中布局的四种方法

使用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】在QML中布局的四种方法

总结

在实际QML应用开发中,我们几乎都是使用QtCreator的设计模式或者Qt Design Studio来对应用软件的组成元素进行布局。直接使用开发工具提供的图形界面接口操作qml文档即可,不用手动去编写和修改代码,这一点非常方便,效率也非常高。

本文所述的四种QML应用组成元素的布局方法,在实际开发中,都会使用到,更多的时候是几种组合在一起去完成一个应用界面的布局,也有单独使用某种布局方法的情况出现。

♥搜索关注『嵌入式小生』VX公众号,获取更多精彩内容♥文章来源地址https://www.toymoban.com/news/detail-404794.html

到了这里,关于【QML】在QML中布局的四种方法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Hive的四种排序方法

    hive排序方法,hive的排序方式 hive有四种排序方法: ORDER BY 、SORT BY 、DISTRIBUTE BY 、CLUSTER BY 0. 测试数据准备 uuid dept salary 1001 研发部 16000 1002 市场部 17000 1003 销售部 11000 1004 研发部 15000 1005 销售部 12000 1006 研发部 21000 1007 产品部 16000 1008 研发部 18000 1009 市场部 17000 1010 产品部 16

    2024年02月02日
    浏览(42)
  • 数据的四种基本存储方法

    数据的存储结构可用以下四种基本存储方法得到: ( 1 )顺序存储方法     该方法把逻辑上相邻的结点存储在物理位置上相邻的存储单元里,结点间的逻辑关系由存储单元的邻接关系来体现。     由此得到的存储表示称为顺序存储结构  (Sequential Storage Structure),通常借

    2024年02月15日
    浏览(44)
  • 检测数据类型的四种方法

    一、数据类型: 1、基本数据类型:String、Number、Boolean、Null、Undefined、Symbol 、BigInt 2、引用数据类型:Object、Array、Function、Date、RegExp 二、检测数据类型的四种方法 1.typeof检测   特点:typeof只能检测基本数据类型(除了null),不能准确的检测引用数据类型。 object、array、

    2024年02月15日
    浏览(45)
  • 最大公约数的四种方法

    求两数的最大公约数,一共有四种方法:暴力穷举法、更相减损法、辗转相除法、stein 算法,小女不才,花了几天的时间终于把这几种方法全部弄明白,现在就把它们全部分享出来。 首先,假设被求的两个数为 x、y,且 x y。最大公约数 d = gcd (x , y) 正如名字所说,暴击穷举法

    2024年02月05日
    浏览(70)
  • MySQL批量更新的四种方法

    最近做一个需求,更新3w条数据,一个一个update去更新的,结果花了80分钟,这样性能上很差,也容易阻塞,所以就找了一些MySQL批量更新的方式,在此记录一下 这种更新会将其它字段更新为默认值,因为它是先将重复记录删掉再更新,谨慎使用 1 2 replace into ` user ` (id,age) va

    2024年02月16日
    浏览(48)
  • 【Python--定时任务的四种方法】

    当每隔一段时间就要执行一段程序,或者往复循环执行某一个任务,这就需要使用定时任务来执行程序。应用很广泛,可以实现程序的自动化,而不需要我们手动的在规定时间内执行。如爬虫,如定时器等等。以下将介绍几种pyhton常用的定时任务方法。 执行简单,代码容易理

    2024年02月04日
    浏览(49)
  • 有关实现深拷贝的四种方法

            深拷贝与浅拷贝:         在开始之前我们需要先了解一下什么是浅拷贝和深拷贝,其实深拷贝和浅拷贝都是针对的引用类型,JS中的变量类型分为值类型(基本类型)和引用类型;对值类型进行复制操作会对值进行一份拷贝,而对引用类型赋值,则会进行地址

    2024年02月04日
    浏览(40)
  • 防止暴力破解ssh的四种方法

    防止暴力破解的四种方法: 1 密码要写的足够的复杂,通常建议将密码写16位,并且无连贯的数字或者字母;当然也可以固定一个时间修改一次密码,推荐是一个月修改一次会稳妥一些 2 修改ssh的端口号,给对方一些迷惑性,因为远程linux服务器默认端口是22,修改成其他的端

    2024年02月03日
    浏览(47)
  • Hive数据导出的四种方法

    hive数据仓库有多种数据导出方法,我在本篇文章中介绍下面的四种方法供大家参考: Insert语句导出、Hadoop命令导出、Hive shell命令导出、Export语句导出。 Hive支持将select查询的结果导出成文件存放在文件系统中。语法格式如下; 注意: 导出操作是一个OVERWRITE覆盖操作,慎重

    2024年01月17日
    浏览(41)
  • 实现瀑布流布局的四种方法

    页面上是一种 参差不齐 的多栏布局,类似上图所示随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部,大部分为图片,图片 固定 宽度,高度 不一 ,根据原比例缩放到宽度达到固定的要求,每行排满后,新的图片添加到后面 固定宽度,高度不一 岑

    2023年04月15日
    浏览(59)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包