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
---> 编程是一件怎么也学不会的事情,但是如果能享受学习的过程也是挺好的。