Anchors, layouts and when each wins Back to course

Anchors, layouts and when each wins

Anchors and layouts solve overlapping problems and mixing them in one item is
the most common way a QML interface starts jumping around.

Use When
Anchors One item positioned relative to another
RowLayout / ColumnLayout Several items sharing space
Layout.fillWidth Letting the layout decide, not you
ColumnLayout {
    anchors.fill: parent
    spacing: 12

    Label {
        text: qsTr("Anchored to the layout, not the window")
        Layout.fillWidth: true
    }
    Rectangle {
        Layout.fillWidth: true
        Layout.fillHeight: true
        color: "#1b1f27"
    }
}

This is a free preview lesson.

Get the full course to unlock the rest of the curriculum.