Également redimensionner tous les enfants d'une Ligne pour s'adapter à leur parent
-
21-12-2019 - |
Question
Je suis en train de mettre 5 boutons de ma fenêtre, alignés dans une rangée, et chaque bouton doit avoir la même largeur, tout en occupant tout l'espace disponible dans le parent.Voici comment je suis en train (d'échec):
Row {
id: toolbar
width: 300
height: 80
Button {
text: "left"
}
Button {
text: "right"
}
Button {
text: "tab"
}
Button {
text: "home"
}
Button {
text: "end"
}
}
Dans cet exemple, le Button
les éléments ne sera pas redimensionnée pour s'adapter à leur parent.Je voudrais voir chaque Button
obtenir 1/5 de leurs parents largeur.De toute évidence, à l'aide de Row
ce n'est pas assez.
Aussi, en utilisant:
width: parent.width / parent.children.count
dans chaque Bouton échoue, parent.children.count
est undefined
.On pourrait utiliser Component.onCompleted
pour définir la largeur, quand tout est déjà préparé, mais il y a une meilleure façon.
Est-il une option de Row
qui veille à l'application de largeur sur ses enfants?Ou ce que les autres options de la disposition est-il?
La solution
Personnellement lorsque vous faites cela, j'utilise un Répéteur et un ListModel ou un tableau de texte de sorte que vous pouvez facilement savoir combien de Button
vous allez avoir et de les redimensionner correctement
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
}
}
}