Cambiando igualmente a todos los niños de una fila para que se ajuste a sus padres.
-
21-12-2019 - |
Pregunta
Estoy tratando de colocar 5 botones en mi ventana, alineados en una fila, y cada botón debe tener un ancho igual, mientras ocupa todo el espacio disponible en el padre.Así es como estoy intentando (falla):
Row {
id: toolbar
width: 300
height: 80
Button {
text: "left"
}
Button {
text: "right"
}
Button {
text: "tab"
}
Button {
text: "home"
}
Button {
text: "end"
}
}
En este ejemplo, los elementos Button
no se cambiarán para adaptarse a su padre.Me gustaría ver a cada Button
obtener 1/5 del ancho de sus padres.Obviamente, el uso de Row
no es suficiente.
también, usando:
width: parent.width / parent.children.count
En cada botón falla, ya que parent.children.count
es undefined
.Uno podría usar Component.onCompleted
para establecer el ancho, cuando todo ya está preparado, pero tiene que haber una mejor manera.
¿Hay una opción de Row
, lo que imponga un ancho en sus hijos?¿O qué otra opción de diseño está ahí?
Solución
Personalmente al hacer esto, uso un repetidor y un listmodel o una matriz de texto para que pueda saber fácilmente cuántos Button
tendrá y redimensionarlos correctamente
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
}
}
}