Одинаково измените размер всех дочерних элементов строки, чтобы они соответствовали их родительскому элементу.
-
21-12-2019 - |
Вопрос
Я пытаюсь разместить в своем окне 5 кнопок, выровненных в ряд, и каждая кнопка должна иметь одинаковую ширину, занимая при этом все доступное пространство в родителе.Вот как я пытаюсь (не получается):
Row {
id: toolbar
width: 300
height: 80
Button {
text: "left"
}
Button {
text: "right"
}
Button {
text: "tab"
}
Button {
text: "home"
}
Button {
text: "end"
}
}
В этом примере Button
размеры элементов не будут изменены, чтобы соответствовать их родительскому элементу.Я хотел бы увидеть каждого Button
получить 1/5 ширины своего родителя.Очевидно, используя Row
недостаточно.
Также используя:
width: parent.width / parent.children.count
в каждой кнопке терпит неудачу, так как parent.children.count
является undefined
.Можно было бы использовать Component.onCompleted
установить ширину, когда все уже подготовлено, но должен быть лучший способ.
Есть ли вариант Row
который обеспечивает ширину своих дочерних элементов?Или какой еще вариант планировки есть?
Решение
Лично я при этом использую Повторитель и ListModel или массив текста, чтобы вы могли легко узнать, сколько Button
вы собираетесь иметь и правильно изменять их размер
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
}
}
}