Cambiando igualmente a todos los niños de una fila para que se ajuste a sus padres.

Question

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í?

Answer 1

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