[QML] Anchor Layout

There are two sets of class libraries related to layout management in Qt Quick, one is Item Positioner (locator) and the other is Item Layout (layout).

• Locators: Row (row locator), Column (column locator), Grid (grid locator), Flow (flow locator)
• Layout: RowLayout (row layout), ColumnLayout (column layout), GridLayout (grid layout), and one is the protagonist of this article, Anchors (anchor layout).

Today we only discuss the anchors layout. Before understanding the anchor layout, let's take a look at what parts it consists of.

1. Anchors

Anchors provide a way for you to determine the position of an element in the interface by specifying the relationship between an element and other elements, that is, anchor layout.

You can imagine that each Item has 7 invisible auxiliary lines: left (left), horizontal center (horizontalCenter), upper (top), lower (bottom), right (right), vertical center (verticalCenter), Baseline. As shown below:

Baseline not above corresponds to the dotted line on which the text sits, and for items without text it is the same as top.

When using the anchors layout, in addition to aligning the anchor lines, you can also specify the margins of the top (topMargin), bottom (bottomMargin), left (leftMargin), and right (rightMargin). As shown below:

The following example specifies leftMargin:

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

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

In this case, 5 pixels are reserved on the left side of rect2, as shown in the figure:

And if you want to be lazy and save trouble, you can also use the margins attribute to set the white space of the four sides to be the same.

Anchor layout is the most flexible layout method of Qt Quick. With it, you can freely arrange the visible elements on the interface. However, if you have a lot of interface elements, it will also be the layout method with the largest amount of code.

2. Some examples

1. Two rectangles on the left side of the window with no spacing:

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

2. The above two rectangles are too close together, and you need to leave some space, which can be achieved by specifying the blank space of 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
    }
}

3. Center one rectangle horizontally and the other vertically:

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

4. centerln means to place an Item in the center of an Item; fill means to fill an 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
    }
}

Anchor layout is very useful in some specific situations, but it also has its disadvantages, that is, the code system is relatively complicated, especially in a situation full of controls, the amount of code is quite redundant.
Let me say so much first, if there is something incomplete, welcome to add...