anchors（锚）是一种指定元素与其他元素位置关系的方法。

 

anchors属性又可以分为AnchorLine、Margin和Offset三个部分。

 

1.AnchorLine是anchors指定位置关系的基础，AnchorLine有top、bottom、

left、right、horizontalCenter、verticalCenter和baseline七条。

从图上看很直观，前六条线分别是元素的四条边外加水平居中线和垂直居中线。baseline是相对于文字而言的。

 

知道了有这么多条AnchorLine，那么又该如何使用呢？

AnchorLine属性的值也是AnchorLine,换句话说就是用元素的AnchorLine和另一个元素的AnchorLine

去对齐。

例如a设置了anchors.left为b的left就表示a的左边和b的左边对齐。

2.margin可以作为AnchorLine的补充，分为topMargin、bottomMargin、leftMargin和rightMargin。

分别表示上下左右四个方向的边距。也可以用margins一次性设置四个方向的边距。margin的取值是

浮点型。

接上一个例子：

3. 之前说AnchorLine有七条,可以margin只有四个，那另外三种AnchorLine怎么进一步调整位置呢？

答案就是使用Offset。horizontalCenterOffset、verticalCenterOffset和baselineOffset，从名字就

可以看出分别对应水平居中、垂直居中和baseline。

例：

4.除了以上对齐方式，anchors还有两个特殊的属性，anchors.fill和anchors.centerIn，分别表示填满元素和在元素中居中。

两个属性的取值是Item（元素）

示例：

centerIn的效果和同时使用水平居中和垂直居中对齐是一样的，有兴趣可以试一试。

 

---> 文章来源于我的个人博客：fearlazy
---> 编程是一件怎么也学不会的事情，但是如果能享受学习的过程也是挺好的。