详解QML的锚点布局anchor（转载）_qml 描点

原文章

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 // 设置部件范围
1