QML容器等距离分割空间

Question

我需要在一行（或一列）中放置几个​​项目，其中所有项目的宽度（或高度）都等于parent.width / number_of_children。是否有容器自动执行此操作？

要在WPF中模拟，您将使用Grid.ColumnDefinition创建一个包含Width="*"声明的网格，并设置每个子项的Column属性。

如何在QML中做到这一点？

Answer 1

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

设置Layout.fillWidth: true会使每个项目占用尽可能多的空间，并且由于每个项目都设置了它们，因此它们都会占用相同的空间。

fillWidth的文档说：

  

如果此属性为true，则项目将尽可能宽   尊重给定的约束。如果属性为false，则为该项   将固定宽度设置为首选宽度。默认是   false，布局本身除外，默认为true。