Qt/QML布局-锚点布局

QML的锚点布局

在QML中的布局方式参考的HTML,有多种,其中锚点是个人比较喜欢使用的一种。

锚线

一个部件有七个锚线(anchor lines), 分别是left、right、top、bottom、horizontalCenter、verticalCenter和baseline。这里的anchor lines都是不可见的。

边距

anchor还提供了控件的边距设置，基本元素分别为leftMargin、rightMargin、topMargin、bottomMargin。如下图所示，橙色背景的方块代表一个部件，则它的四周顺时针分别表示为左侧边距、顶部边距、右侧边距、底部边距。

示例

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.4

Window {
    visible: true
    width: 600
    height: 480
    title: qsTr("Hello World")

    Rectangle {
        id: rect1
        width: 100
        height: 100
        color: "blue"
        anchors.left: parent.left
        anchors.leftMargin: 20
    }

    Rectangle {
        id: rect2
        width: 100
        height: 100
        color: "red"
        anchors.left: rect1.right
        anchors.leftMargin: 60
    }
}