Qt 5.4 QML 布局

Question

使用 anchors 进行界面布局

anchors 提供了一种方式，让你可以通过指定一个元素与其它元素的关系来确定元素在界面中的位置。

每个 item 都有 7 条不可见的锚线：左（left）、水平中心（horizontalCenter）、上（top）、下（bottom）、右（right）、垂直中心（verticalCenter）、基线（baseline）。

基线是用于定位文本的，你可以想象一行文字端坐基线的情景。对于没有文本的图元，baseline 和 top 一致。

使用 anchors 布局时，除了对齐锚线，还可以在指定上（topMargin）、下（bottomMargin）、左（leftMargin）、右（rightMargin）四个边的留白。

Item 的 anchors 属性，除了上面介绍的，还有一些，如 centerIn 表示将一个 item 居中放置到另一个 item 内； fill 表示充满某个 item ……更多请参考 Item 类的文档。

centerIn 和 fill 的示例

import QtQuick 2.0

Rectangle {
    width: 300;
    height: 200;

    Rectangle {
        color: "blue";
        anchors.fill: parent;	//对父类对象进行完全填充
        border.width: 6;	//本矩形（rectangle）边距宽度
        border.color: "#888888";//边距颜色

        Rectangle {
            anchors.centerIn: parent;//处于父类对象居中
            width: 120;				
            height: 120;
            radius: 8;		//圆角，半径 8 像素
            border.width: 2;		
            border.color: "black";
            antialiasing: true;	//反锯齿
            color: "red";
        }
    }
}

补充说明

我们从对齐布局中看到两种方式，一种是使用属性绑定如 width: parent.width ，另一种是使用

anchors { left:parent.left; right:parent.right }

根据文档说明，尽量使用后者，因为效率可能会比前者高点。对于父元素为 Row 或 Column 的话，只能使用前者来对齐。