彼らの親に収まるように行のすべての子供たちを同様にサイズ変更する

Question

私は私のウィンドウに5つのボタンを一行に揃えていて、各ボタンは親のすべての利用可能なスペースを占有しながら、各ボタンが等しいはずです。これが私が試しているのか（失敗した）：

Row {
      id: toolbar
      width: 300
      height: 80

      Button {
        text: "left"
      }

      Button {
        text: "right"
      }

      Button {
        text: "tab"
      }

      Button {
        text: "home"
      }

      Button {
        text: "end"
      }
}

.

この例では、Button項目は親に収まるようにサイズ変更されません。それぞれのButtonが両親の幅の1/5を得たいと思います。明らかに、Rowを使用すると十分ではありません。

また、使用：

width: parent.width / parent.children.count

.

は、parent.children.countがundefinedとして失敗します。すべてがすでに準備されているとき、Component.onCompletedを使用して幅を設定できますが、より良い方法がある必要があります。

子供の幅を強制するRowのオプションはありますか？または他のレイアウトオプションがありますか？

Answer 1

PerseNallyこれを行うときは、リピーターとListModelまたはテキストの配列を使います。

ListModel {
    id: modelButtons
    ListElement { buttonText: "left" }
    ListElement { buttonText: "right" }
    ListElement { buttonText: "tab" }
    ListElement { buttonText: "home" }
    ListElement { buttonText: "end" }
}

Row {
    id: toolbar
    width: 300
    height: 80

    Repeater {
        id: repeaterButton
        model: modelButtons
        delegate: Button {
            width: toolbar.width / repeaterButton.model.count
            text: buttonText
        }
    }
}

.