'QML Row "fill" / auto-spacing?

Instead of assigning a fixed spacing between items, it is possible to evenly spread the items along the (parent's) width, so as to maximize spacing?

What I currently do is:

Row {
    width: parent.width
    readonly property real childrenWidth: {
        var w = 0
        for(var child of children) w += child.width
        return w
    }
    spacing: (width - childrenWidth) / Math.max(1, children.length - 1)
    MyElement {}
    MyElement {}
    ...
}

Is there a better way?

qtqml


Solution 1:[1]

I think you are looking for RowLayout

RowLayout {
    width: parent.width

    MyElement { Layout.fillWidth: true }
    MyElement { Layout.fillWidth: true }
}

If needed you can declare minimumWidth, preferredWidth and/or maximumWidth, see the documentation. Without these, the implicitWidth of MyElement is used.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Amfasis

Related Questions