Ridimensionati ugualmente tutti i figli di una fila per adattarsi al loro genitore
-
21-12-2019 - |
Domanda
Sto cercando di mettere 5 pulsanti nella mia finestra, allineati in fila, e ogni pulsante dovrebbe avere la stessa larghezza, mentre occupiamo tutto lo spazio disponibile nel genitore.Ecco come sto provando (fallisce):
Row {
id: toolbar
width: 300
height: 80
Button {
text: "left"
}
Button {
text: "right"
}
Button {
text: "tab"
}
Button {
text: "home"
}
Button {
text: "end"
}
}
.
In questo esempio, gli elementi Button
non verranno ridimensionati per adattarsi al genitore.Mi piacerebbe vedere ogni Button
ottenere 1/5 della larghezza dei genitori.Ovviamente, usare Row
non è sufficiente.
Inoltre, usando:
width: parent.width / parent.children.count
.
In ogni pulsante non riesce, poiché parent.children.count
è undefined
.Si potrebbe usare Component.onCompleted
per impostare la larghezza, quando tutto è già preparato, ma deve esserci un modo migliore.
C'è un'opzione di Row
che impone una larghezza sui suoi figli?O quale altra opzione di layout è lì?
Soluzione
Personalmente Quando si esegue questo uso un ripetitore e un listModel o una serie di testo in modo da poter sapere facilmente quante generatoriTagCode avrai e ridimensionarli correttamente
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
}
}
}
.