英文:
Can you add a horizontal ScrollBar to a TabBar in QML?
问题
我知道TabBar是可滚动的，但我希望有一个滚动条来指示这一点...尽管我尝试了很多次，但似乎无法让它工作（当我尝试使用滚动条时，它只会崩溃）。
TabBar {
id: testTabBar
width: parent.width
ScrollBar.horizontal: ScrollBar {
parent: testTabBar
anchors.top: testTabBar.bottom
anchors.left: testTabBar.left
anchors.right: testTabBar.right
policy: ScrollBar.AlwaysOn
}
Repeater {
model: ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5", "Item 6"]
TabButton {
required property string modelData;
text: modelData
width: Math.max(100, testTabBar.width / 3)
onClicked: function() {
console.log(modelData + " Clicked");
}
}
}
}
英文:
I know that TabBar is Flickable, but I would like a Scrollbar to be present to indicate this... As much as I try, I can't seem to get it working (it just crashes when I try to use the Scroll Bar).
TabBar {
id: testTabBar
width: parent.width
ScrollBar.horizontal: ScrollBar {
parent: testTabBar
anchors.top: testTabBar.bottom
anchors.left: testTabBar.left
anchors.right: testTabBar.right
policy: ScrollBar.AlwaysOn
}
Repeater {
model: ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5", "Item 6"]
TabButton {
required property string modelData;
text: modelData
width: Math.max(100, testTabBar.width / 3)
onClicked: function() {
console.log(modelData + " Clicked");
}
}
}
}
答案1
得分: 1
一个简单的解决方法是，如果您将TabBar+Repeater替换为ListView，您将获得支持ScrollBar的TabButton：
ListView {
id: testTabBar
orientation: ListView.Horizontal
height: contentItem.children[0].height + 20
ScrollBar.horizontal: ScrollBar {
policy: ScrollBar.AlwaysOn
height: 20
}
model: ["项目 1", "项目 2", "项目 3", "项目 4", "项目 5", "项目 6"]
delegate: TabButton {
required property string modelData;
text: modelData
width: Math.max(100, testTabBar.width / 3)
onClicked: function() {
console.log(modelData + " 已点击");
}
}
}
您可以在线尝试！
英文:
A simple workaround is if you replace TabBar+Repeater with ListView, you'll get your TabButton with support for a ScrollBar:
ListView {
id: testTabBar
orientation: ListView.Horizontal
height: contentItem.children[0].height + 20
ScrollBar.horizontal: ScrollBar {
policy: ScrollBar.AlwaysOn
height: 20
}
model: ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5", "Item 6"]
delegate: TabButton {
required property string modelData;
text: modelData
width: Math.max(100, testTabBar.width / 3)
onClicked: function() {
console.log(modelData + " Clicked");
}
}
}
You can Try it Online!
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论