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，佈局本身除外，默認爲true。