Redimensione igualmente todos os filhos de uma linha para caber no pai

Question

Estou tentando colocar 5 botões na minha janela, alinhados em uma linha, e cada botão deve ter largura igual, ocupando todo o espaço disponível no pai.Veja como estou tentando (falha):

Row {
      id: toolbar
      width: 300
      height: 80

      Button {
        text: "left"
      }

      Button {
        text: "right"
      }

      Button {
        text: "tab"
      }

      Button {
        text: "home"
      }

      Button {
        text: "end"
      }
}

Neste exemplo, o Button os itens não serão redimensionados para caber em seus pais.Eu gostaria de ver cada Button obtenha 1/5 da largura de seus pais.Obviamente, usando Row não é suficiente.

Além disso, usando:

width: parent.width / parent.children.count

em cada botão falha, como parent.children.count é undefined.Alguém poderia usar Component.onCompleted para definir a largura, quando já está tudo preparado, mas tem que haver um jeito melhor.

Existe uma opção de Row que impõe uma largura a seus filhos?Ou que outra opção de layout existe?

Answer 1

Pessoalmente, ao fazer isso, eu uso um Repeater e um ListModel ou um array de texto para que você possa saber facilmente quantos Button você vai ter e redimensioná-los corretamente

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