Roson讲Qt#16 QML中的anchors(锚)

末蓝、 2022-09-09 11:44 132阅读 0赞

QML中有一个数据类型叫**Item**，Item里面有很多属性，其中一个就是**anchors.**

**anchors**翻译过来叫“锚”，锚可能不好理解，在我看来，可以把anchors当成是一个控件浓缩而成的一个点，可以通过设置点的上下左右等属性来控制界面外观，控制项与项之间的关系。

下面这个例子设置了：

以pic的水平方向上的中心作为lable的水平方向的中心

以pic的底部边框作为lable的上方边框

在label的上方设置5个像素的边距

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_20_color_FFFFFF_t_70_g_se_x_16][]

下面这个例子设置了：

以pic的水平方向上的中心作为lable的水平方向的中心

以pic的右侧边框作为lable的左侧边框

在label的左侧设置5个像素的边距

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

那么肯定有人问了，Anchors到底有哪些属性可以进行设置呢，下面全部列举出来：

AnchorLine、Item、real、bool都是QML中的数据类型，real表示的是小数（注意:在QML中，所有实数都以双精度IEEE浮点格式存储）。其它的单词就没啥好解释的。

anchors.top : AnchorLine  
anchors.bottom : AnchorLine  
anchors.left : AnchorLine  
anchors.right : AnchorLine  
anchors.horizontalCenter : AnchorLine  
anchors.verticalCenter : AnchorLine  
anchors.baseline : AnchorLine  
anchors.fill : Item  
anchors.centerIn : Item  
anchors.margins : real  
anchors.topMargin : real  
anchors.bottomMargin : real  
anchors.leftMargin : real  
anchors.rightMargin : real  
anchors.horizontalCenterOffset : real  
anchors.verticalCenterOffset : real  
anchors.baselineOffset : real  
anchors.alignWhenCentered : bool

**其它注意事项**

margins适用于上、下、左、右和填充锚。anchors.margins可用于一次将所有不同的边距设置为相同的值。它不会覆盖之前设置的特定边界;要清除显式的边距，请将其值设置为undefined。请注意，边距是特定于锚的，如果项目不使用锚，则边距不起作用。  
    offsets适用于水平中心、垂直中心和基线锚点。

anchors.fill提供了一种方便的方式，使一个项目具有与另一个项目相同的几何形状，并等效于连接所有四个方向锚。  
    要清除锚值，请将其设置为undefined。  
    anchors.alignWhenCentered(默认为true)强制居中锚点对齐到整个像素;如果居中项的宽度或高度为奇数，则该项将被定位在整个像素上，而不是半像素上。这确保了项目是清晰的油漆。在某些情况下，这是不可取的，例如，当旋转项目时，由于中心是圆形的，抖动可能是明显的。  
注意:您只能将item锚定到兄弟或父节点。

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/f32dc97ed4b34cab82dfed7efa808a82.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220829/537baf4b993847d68048de8d36310fac.png