Ändern Sie die Größe aller untergeordneten Elemente einer Zeile gleichermaßen, damit sie in ihre übergeordneten Elemente passen

Question

Ich versuche, 5 Schaltflächen in einer Reihe ausgerichtet in mein Fenster einzufügen, und jede Schaltfläche sollte die gleiche Breite haben, während der gesamte verfügbare Platz im übergeordneten Fenster belegt wird.So versuche ich es (schlägt fehl):

Row {
      id: toolbar
      width: 300
      height: 80

      Button {
        text: "left"
      }

      Button {
        text: "right"
      }

      Button {
        text: "tab"
      }

      Button {
        text: "home"
      }

      Button {
        text: "end"
      }
}

In diesem Beispiel wird die Button die Größe von Elementen wird nicht an ihre übergeordneten Elemente angepasst.Ich würde gerne jeden sehen Button holen Sie sich 1/5 der Breite ihrer Eltern.Offensichtlich mit Row ist nicht genug.

Auch mit:

width: parent.width / parent.children.count

in jeder Taste schlägt fehl, wie parent.children.count is undefined.Man könnte verwenden Component.onCompleted um die Breite einzustellen, wenn schon alles vorbereitet ist, aber es muss einen besseren Weg geben.

Gibt es eine Option von Row was erzwingt seinen Kindern eine Breite?Oder welche andere Layoutoption gibt es?

Answer 1

Persönlich verwende ich dabei einen Repeater und ein Listenmodell oder ein Textfeld, damit Sie leicht wissen, wie viele Button sie werden sie richtig haben und in der Größe ändern

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