Qt Quick 笔记 - Anchors

看到许多 Qt Quick 样例中都会用到 Anchors,在官网这里找到了资料。还有这里也有详细的说明。

除了Grid, Row, and Column,Anchors 也可以用来布局。

注意只能对兄弟或父母 item 使用 anchors

Anchors 是 Item 中的属性,所以大多数类型都可以使用 Anchors。

一图胜千言:

edges_qml

简单的例子:

1
2
3
4
5
6
7
8
9
10
11
12
// ...
Rectangle {
id: rect1
//...
}
Rectangle {
id: rect2
anchors.left: rect1.right
//...
}
//...

布局就会是这样子:

edge1

换一下

1
2
3
4
5
6
7
8
9
10
11
12
13
//...
Rectangle {
id: rect1
//...
}
Rectangle {
id: rect2
anchors.left: rect1.right
anchors.top: rect1.bottom
//...
}
//...

布局就会是这样子

edge3

anchors.baseline 是一条假想的线,代表文本的位置。对于无文本的 item 它跟 top 一致。

还有一些比较方便的属性

anchors.fill: something 就是去填满 something,即 left,right,top, bottom 值都相等。

anchors.centerIn: something 就是中心与 something 相等,即 verticalCenter, horizontalCenter 值相等。

anchors.margins: 实数 以像素为单位设置间距,再次一图胜千言:

margins_qml

例子

1
2
3
4
5
6
7
8
9
10
11
12
13
//...
Rectangle {
id: rect1
//...
}
Rectangle {
id: rect2
anchors.left: rect1.right
anchors.leftMargin: 5
//...
}
//...

edge2

注意 margins 是按 anchors 来设置间距,假如没有设置 anchor,margins 就会失效。

此时可以用偏移值来设置间距,共三种:

  • anchors.horizontalCenterOffset : 实数

  • anchors.verticalCenterOffset : 实数

  • anchors.baselineOffset : 实数

使用 AnchorChanges 去处理状态

1
2
3
4
5
6
7
8
State {
name: "anchorRight"
AnchorChanges {
target: rect2
anchors.right: parent.right
anchors.left: undefined //remove the left anchor
}
}

使用 AnchorAnimation 激活 AnchorChanges:

1
2
3
Transition {
AnchorAnimation {} //animates any AnchorChanges in the corresponding state change
}

anchor_ordering

可以直接用 JavaScript 代替,但是要小心使用,会有很多坑

1
2
3
4
5
6
7
8
9
10
//会出问题
Rectangle {
width: 50
anchors.left: parent.left
function reanchorToRight() {
anchors.right = parent.right
anchors.left = undefined
}
}

会变成这样:

anchor_ordering_bad

要先释放不需要的属性再去更新其它属性

1
2
3
4
5
6
7
8
9
Rectangle {
width: 50
anchors.left: parent.left
function reanchorToRight() {
anchors.left = undefined
anchors.right = parent.right
}
}

还有这种代码

1
2
3
4
5
6
//bad code
Rectangle {
width: 50; height: 50
anchors.left: state == "right" ? undefined : parent.left;
anchors.right: state == "right" ? parent.right : undefined;
}

不推荐这么写,因为在 AnchorChanges 内部就会自动处理了。

最后说明,不要跟绝对坐标混用,要用绝对坐标时先把冲突的 anchor 设置为 undefined ​

您还在局域网。 ——来自隔墙相望的评论