看到许多 Qt Quick 样例中都会用到 Anchors,在官网这里找到了资料。还有这里也有详细的说明。
除了Grid, Row, and Column,Anchors 也可以用来布局。
注意只能对兄弟或父母 item 使用 anchors
Anchors 是 Item 中的属性,所以大多数类型都可以使用 Anchors。
一图胜千言:
简单的例子:
1 |
// ... |
布局就会是这样子:
换一下
1 |
//... |
布局就会是这样子
anchors.baseline
是一条假想的线,代表文本的位置。对于无文本的 item 它跟 top 一致。
还有一些比较方便的属性
anchors.fill: something
就是去填满 something,即 left,right,top, bottom 值都相等。
anchors.centerIn: something
就是中心与 something 相等,即 verticalCenter, horizontalCenter 值相等。
anchors.margins: 实数
以像素为单位设置间距,再次一图胜千言:
例子
1 |
//... |
注意 margins 是按 anchors 来设置间距,假如没有设置 anchor,margins 就会失效。
此时可以用偏移值来设置间距,共三种:
-
anchors.horizontalCenterOffset : 实数
-
anchors.verticalCenterOffset : 实数
-
anchors.baselineOffset : 实数
使用 AnchorChanges 去处理状态
1 |
State { |
使用 AnchorAnimation 激活 AnchorChanges:
1 |
Transition { |
可以直接用 JavaScript 代替,但是要小心使用,会有很多坑
1 |
//会出问题 |
会变成这样:
要先释放不需要的属性再去更新其它属性
1 |
Rectangle { |
还有这种代码
1 |
//bad code |
不推荐这么写,因为在 AnchorChanges 内部就会自动处理了。
最后说明,不要跟绝对坐标混用,要用绝对坐标时先把冲突的 anchor 设置为 undefined