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。