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说：

如果此属性为真，则项目将在遵守给定约束的同时尽可能宽。如果该属性为 false，则该项目将具有设置为首选宽度的固定宽度。默认为 false，除了布局本身，默认为 true。