【QML】锚布局

news2024/11/25 9:43:20

文章目录

- - 1、锚（Anchors）
  - 2、一些示例

Qt Quick中有两套与布局管理相关的类库，一种是Item Positioner（定位器），一种是Item Layout（布局）

定位器：Row（行定位器）、Column（列定位器）、Grid（网格定位器）、Flow（流式定位器）
布局：RowLayout（行布局）、ColumnLayout（列布局）、GridLayout（网格布局），还有一种就是这篇文章的主角Anchors（锚布局）。

今天只讨论Anchors布局，了解锚点布局之前，先看一下他由哪些部分组成。

1、锚（Anchors）

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

你可以想象一下，每个 Item 都有 7 条不可见的辅线：左（left）、水平中心（horizontalCenter）、上（top）、下（bottom）、右（right）、垂直中心（verticalCenter）、基线（baseline）。如下图所示：
锚结构

基线非上图对应于文本所坐的虚线，对于没有文本的项目而言，它于top相同。

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

内边距
下面的示例指定leftMargin：

Rectangle {
	id: rect1
	color: "blue"
	//TODO...
}

Rectangle {
	id: rect2
	color: "red"
	//指定左边距
	anchors.left: rect1.rigth
	anchors.leftMargin: 5
	//TODO...
}

在这种情况下，rect2左边保留了5个像素点，如图所示：

而如果你想懒省事儿，也可以使用 margins 属性将四个边的留白设置成一样。

锚布局是最灵活的一种 Qt Quick 布局方式，使用它你可以随意摆布界面上那些可见元素，不过，如果你的界面元素很多，它也将是代码量最大的一种布局方式。

2、一些示例

两个矩形在窗口左侧，无间距：

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
    }

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

上面的两个矩形挨得太紧了，要留点间距，可以通过指定 anchors.leftMargin 的留白来实现：

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
    }
}

一个矩形水平居中，另一个矩形垂直居中：

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.horizontalCenter: parent.horizontalCenter
        anchors.top: parent.top
        anchors.topMargin: 40
    }

    Rectangle {
        id: rect2
        width: 100
        height: 100
        color: "red"
        anchors.verticalCenter: parent.verticalCenter
        anchors.right: parent.right
        anchors.rightMargin: 40
    }
}

centerln 表示将一个 Item 居中放置到一个 Item 内；fill 表示充满某个 Item：

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
        color: "blue"
        anchors.fill: parent
    }

    Rectangle {
        id: rect2
        width: 100
        height: 100
        color: "red"
        anchors.centerIn: parent
    }
}