Ridimensionati ugualmente tutti i figli di una fila per adattarsi al loro genitore

Question

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

Answer 1

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

.