QML (控件位置布局):锚布局详解

---

锚布局简介

使用QML布局时除了使用属性x,y,z方式来确定位置外，还可以使用anchors制定一个元素与其他元素的关系来确定元素在界面中的位置.
anchors 提供了一种方式，让你可以通过指定一个元素与其他元素的关系来确定元素在界面中的位置,即锚布局。 它是最灵活的一种 Qt
Quick 布局方式，使用它你可以随意摆布界面上那些可见元素.
使用QML布局时除了使用属性x,y,z方式来确定位置外，还可以使用anchors制定一个元素与其他元素的关系来确定元素在界面中的位置.

---

锚线

每个 Item 都有 7 条不可见的辅线：左（left）、水平中心（horizontalCenter）、
上（top）、下（bottom）、右（right）、垂直中心（verticalCenter）、基线（baseline）。
7条锚分别对应了Item项目中的anchors属性组的相关属性。因为Qt
Quick中所有可视项目都继承自Item，所以所有可视项目都可以使用锚进行布局。Qt Quick的锚定系统允许不同项目的锚线之间建立关系。


如上图：图中没有显示baseline，它是一条假想的线，文本坐落在这条线上。对于没有文本的项目它与top相同。

---

锚边距和位移

锚定系统也允许为一个项目的锚指定边距(margin)和偏移量(offset)。
边距指定了项目锚到外边界的空间量，而偏移则允许使用中心锚线进行定位。

所以,除了对齐锚线，还可以指定上（topMargin）、下（bottomMargin）、左（leftMargin）、右（rightMargin）四个边n独立指定锚边距,也可以使用anchor.margins来为所有的4个边指定相同的边距。
锚偏移可以使用 horizontalCenterOffset,verticalCenterOffset 和 baselineOffset来指定。

运行时改变锚

Qt Quick 提供了AnchorChanges类型，以便在运行时修改项目的锚，它需要在状态State中进行。AnchorChanges不能修改项目的边距，需要时可以使用PropertyChanges完成。
使用AnchorChanges改变项目的top和bottom锚，使用PropertyChanges修改top和bottom锚边距。
示例:

import QtQuick 2.2

Rectangle {
    id: window
    width: 120; height: 120
    color: "black"
    Rectangle { id: myRect; width: 50; height: 50; color: "red" }
    states: State {
        name: "reanchored"
        AnchorChanges {
            target: myRect
            anchors.top: window.top
            anchors.bottom: window.bottom
        }
        PropertyChanges {
            target: myRect
            anchors.topMargin: 10
            anchors.bottomMargin: 10
        }
    }

    MouseArea {
        anchors.fill: parent;
        onClicked: window.state = "reanchored"
    } } 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25