Ändern Sie die Größe aller untergeordneten Elemente einer Zeile gleichermaßen, damit sie in ihre übergeordneten Elemente passen
-
21-12-2019 - |
Frage
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?
Lösung
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
}
}
}