Redimensione igualmente todos os filhos de uma linha para caber no pai
-
21-12-2019 - |
Pergunta
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?
Solução
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
}
}
}