CODEWITHSUNDEEP
qtlayoutqml
Ribtoks
Ribtoks

Reputation: 6922

QML container to split space equidistantly

I need to put several items in a row (or a column) where all of them will get equal width (or height) equal to parent.width / number_of_children. Is there a container which does that automatically?

To simulate that in the WPF you will create a grid with Grid.ColumnDefinition declarations with Width="*" and just set each child's Column property.

How to do that in QML?

Upvotes: 1

Views: 1887

Answers (1)

Mitch
Mitch

Reputation: 24396

Use RowLayout:

import QtQuick 2.8
import QtQuick.Layouts 1.3
import QtQuick.Window 2.2

Window {
    visible: true
    width: 400
    height: 400

    RowLayout {
        width: 200
        height: 32
        spacing: 0
        anchors.centerIn: parent

        Rectangle {
            color: "salmon"
            Layout.fillWidth: true
            Layout.fillHeight: true
        }
        Rectangle {
            color: "navajowhite"
            Layout.fillWidth: true
            Layout.fillHeight: true
        }
        Rectangle {
            color: "steelblue"
            Layout.fillWidth: true
            Layout.fillHeight: true
        }
    }
}

screenshot

Setting Layout.fillWidth: true will make each item take up as much space as possible, and since each item has it set, they all take up an equal amount of space.

The documentation for fillWidth says:

If this property is true, the item will be as wide as possible while respecting the given constraints. If the property is false, the item will have a fixed width set to the preferred width. The default is false, except for layouts themselves, which default to true.

Upvotes: 6

Related Questions