Anclaje de controles

La propiedad de anclaje de un control permite situarlo en relación al control padre que lo contiene o en relación a otros controles.

• anchors.alignWhenCentered

• anchors.baseline

• anchors.baselineOffset

• anchors.bottom

• anchors.bottomMargin

• anchors.centerIn

• anchors.fill

• anchors.horizontalCenter

• anchors.horizontalCenterOffset

• anchors.left

• anchors.leftMargin

• anchors.margins

• anchors.right

• anchors.rightMargin

• anchors.top

• anchors.topMargin

• anchors.verticalCenter

• anchors.verticalCenterOffset

import QtQuick 2.15
import QtQuick.Controls 2.15
import org.mauikit.controls 1.3 as Maui

Maui.ApplicationWindow
{
    id: root

    Maui.Page {
        anchors.fill: parent

        showCSDControls: true

        Rectangle {
            id: rect1

            anchors.right: parent.right
            anchors.top: parent.top
            anchors.margins: 100
            width: 100
            height: 100
            color: "deeppink"
            radius: 4

            Label {
                anchors.centerIn: parent
                text: "rect1"
            }
        }

        Rectangle {
            id: rect2

            anchors.centerIn: parent

            width: 100
            height: 100
            color: "mediumspringgreen"
            radius: 4

            Label {
                anchors.centerIn: parent
                text: "rect2"
            }
        }
    }
}

Casos de anclaje de rect2.

Anclaje 1.

anchors.centerIn: parent

Anclaje 2.

anchors.fill: parent

Anclaje 3.

anchors.bottom: parent.bottom
anchors.horizontalCenter: parent.horizontalCenter

Anclaje 4.

anchors.top: rect1.bottom
anchors.right: rect1.left

Anclaje 5.

anchors.fill: rect1

Orden z.

Define la posición por encima o por debajo de un control sobre los demás controles. Para el caso de "Anclaje 2" si se establece "z: 1" en rect1, éste será establecido encima de rect2.

import QtQuick 2.15
import QtQuick.Controls 2.15
import org.mauikit.controls 1.3 as Maui

Maui.ApplicationWindow
{
    id: root

    Maui.Page {
        anchors.fill: parent

        showCSDControls: true

        Rectangle {
            id: rect1

            anchors.right: parent.right
            anchors.top: parent.top
            anchors.margins: 100
            width: 100
            height: 100
            color: "deeppink"
            radius: 4
            z: 1

            Label {
                anchors.centerIn: parent
                text: "rect1"
            }
        }

        Rectangle {
            id: rect2

            anchors.fill: parent

            width: 100
            height: 100
            color: "mediumspringgreen"
            radius: 4

            Label {
                anchors.centerIn: parent
                text: "rect2"
            }
        }
    }
}