题
我试图在我的窗口中放置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
}
}
}
不隶属于 StackOverflow