Également redimensionner tous les enfants d'une Ligne pour s'adapter à leur parent

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?

Answer 1

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