【QML学习6】锚点布局 anchors_anchors.margins

1. 锚点布局简介

锚点布局与之前通过指定 (x,y) 以及 (weight, height)来指定元素的位置与大小不同，锚点布局通过指示元素的关键位置与其他元素的关键位置的相对位置关系来确定。
基本的关键位置有以下6个：

2. 锚点布局的基本使用方式

下面是使用锚点布局的一个案例：

Rectangle {
    id: background
    width: 300; height: 100
    color: "lightblue"

    Rectangle {
        color: "green"
        y: 25
        height: 50; width: 50
        anchors.right: background.right
        anchors.verticalCenter: background.verticalCenter
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

使用anchors来指示具体的锚（就是指定的两个锚对齐），上面的代码效果如下：

TIps1: 锚点的属性定义换做下面的写法也是OK的：

Rectangle {
    color: "green"
    y: 25
    height: 50; width: 50
    anchors{
        right: background.right
        verticalCenter: background.verticalCenter
    }
}
1
2
3
4
5
6
7
8
9

TIps2: 锚点布局与(x,y) 以及 (weight, height)的描述可以互作补充，在两者的描述冲突时以锚点布局的定义为准，如下面的案例，即便定义了x，但是还是按照anchors.right: background.right的描述来进行布局：

Rectangle {
    id: background
    width: 300; height: 100
    color: "lightblue"

    Rectangle {
        color: "green"
        x: 10
        height: 50; width: 50
        anchors.right: background.right
        anchors.verticalCenter: background.verticalCenter
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

这样写的效果还是：

提示： anchors.right: background.right不要写成anchors.right: background.anchors.right了。

3. 居中与填充

可以使用下面的命令来指示居中关系：

anchors.fill: background
1

执行后大的效果如下：

使用以下指令来指示填充关系：

anchors.centerIn: background
1

Tips：这两个指令的优先级要比指示上面的6个锚点的描述优先级要高一些，遇到两种描述的冲突以这里的两个指令的描述为准。

4. 对齐边界margins

指示锚点对齐后，可以使用margin设置边界值，一次性设置4个方向的边界值可以使用anchors.margins:
下图是对应下面组合的效果：

anchors.margins: 10
anchors.centerIn: background
1
2

也可以单独指示四个方向的边界值：

anchors.bottomMargin: 10
anchors.rightMargin: 10
anchors.topMargin: 10
anchors.leftMargin: 10
1
2
3
4