详解QML的锚点布局anchor(转载)

原文章

QML是Qt推出的Qt Quick技术的一部分,它可以快速便捷实现流畅的UI。最近工作项目中采用了QML来开发触摸屏,由于第一次接触使用QML, 难免遇到各种各样的问题,特别是界面的布局,所以,本文结合工作中探索的经验,重新梳理总结了QML的锚点布局anchor。

本文将会从以下四个方面来讲解锚点布局,分别是锚线、边距、偏移以及便捷用法。首先给出下面的结构图,一方面可以让大家在总体上对锚点布局的内容有一个框架,另一方面也方便后续知识的回顾梳理。先安静下来,花几分钟熟悉下总体知识结构,然后再往下阅读,阅读完成之后,再回来看看是否知识结构更加清晰明了。

在这里插入图片描述

一、布局简介

锚点布局anchor, 对于第一次接触QML的新手来说,可能稍微比较难理解,这里可以这么理解, 锚是船停泊时所用的器具,用来固定船只。对于界面布局来说,就是用来固定部件的位置。

二、位置布局

一个部件有七个锚线(anchor lines), 分别是left、right、top、bottom、horizontalCenter、verticalCenter和baseline。这里的anchor lines都是不可见的。

下图所示,蓝色区域代表一个部件,用虚线来代表锚线,left代表部件的左锚线、right代表部件的右锚线、top代表部件的顶部锚线、bottom代表部件的底部锚线、horizontalCenter代表部件的水平居中锚线、vertialCenter代表部件的垂直居中锚线。

至于baseline锚线,这里没有搞明白他的具体效果,所以没有画出。QT的官方文档说是baseline是标示文本的虚线,对于没有文本的部件,功能等同于top。但是实际操作的时候,没有看出区别。所以,对于没有理清的知识点,就不多说了,免得误人子弟。

在这里插入图片描述

下面我们来看一个位置布局的例子。这里设置整个窗口背景为黑色。例子中代码我们只需要关注rect1和rect2的最后一行。比如rect1最后一行为anchors.left: parent.left,表示rect1左侧的锚线在父级的左侧锚线。rect2最后一行为anchors.left: rect1.right,表示rect2左侧锚线在rect1的右侧锚线。这里需要注意部件在rect1和rect2是在直接父级的内部,而rect1和rect2是属于同级级别。所以,锚点的设置稍微有点区别。这里可以细细体会一下。

在这里插入图片描述

运行显示的效果如下图所示,rect1在窗口左上角,rect2显示在rect1的右侧。

在这里插入图片描述

anchor也提供简易设置位置的方式,如centerIn, 表示位置为目标对象的中心,相当于同时设置了horizontalCenter和verticalCenter。比如上面例子中文本的设置anchors.centerIn: parent,表示将文本信息位置设置为父级的中心。

注意,我们采用anchor进行布局的时候,如果单单设置一个属性是没有办法确定其位置,这可能导致部件没有办法显示出来。比如如果rect1没有设置height, 那么rect1就不会显示。如果不想要显示设置rect1的高度,那么除了设置rect1左侧的锚线,还需要设置它的顶部和底部的锚线。

三、边距

anchor还提供了控件的边距设置,基本元素分别为leftMargin、rightMargin、topMargin、bottomMargin。如下图所示,橙色背景的方块代表一个部件,则它的四周顺时针分别表示为左侧边距、顶部边距、右侧边距、底部边距。

在这里插入图片描述

上一个例子的基础上在rect2中增加边距 anchors.leftMargin:50

在这里插入图片描述

运行效果如下所示,rect2左侧增加了边距。

在这里插入图片描述

anchors也提供简易设置部件边距的方法,如margins, 它的功能相当于将部件的左右上下边距都设置为相同的值。

四、偏移

anchor可以设置部件的偏移,分别为horizontalCenterOffset, verticalCenterOffset 和baselineOffset,表示水平中心的偏移、垂直中心的偏移、基线的偏移。

添加部件rect3, 设置显示在窗体中心,但是偏向右下角50个像素

在这里插入图片描述

运行效果如下图所示, 左侧窗口是没有设置偏移的效果,右侧窗口是设置了偏移的效果。

在这里插入图片描述

五、局限

anchor布局也有局限性,出于性能考虑,部件只能设置锚点为同级或者直接父级。

七、总结

本文已经将锚点布局涉及的锚线、边距、偏移,结合例子进行详细的讲解说明。对于复杂的布局,如果采用锚点布局,那么都是上面基本元素组合而成的。
qml中一个块就是一个部件,类似于html的标签,相对上一级的布局设计。


anchor.fill // 设置部件范围
©️2020 CSDN 皮肤主题: 1024 设计师:上身试试 返回首页