如何在QML的TabBar中添加水平ScrollBar？

你的代码崩溃原因是直接给TabBar设置ScrollBar.horizontal附加属性，并将ScrollBar的父级设为TabBar，这会引发布局循环和组件绑定冲突——TabBar内部的滚动容器是私有实现，直接附加ScrollBar会干扰其内部逻辑。

正确的做法是将ScrollBar绑定到TabBar内部的滚动容器（通过flickableItem属性访问），而非直接附加到TabBar本身。修改后的代码如下：

TabBar {
    id: testTabBar
    width: parent.width
    // 显式声明开启滚动（默认已开启，此写法更清晰）
    scrollable: true

    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: console.log(modelData + " Clicked")
        }
    }
}

// 将ScrollBar放在TabBar外部，绑定到其内部滚动容器
ScrollBar {
    anchors.top: testTabBar.bottom
    anchors.left: testTabBar.left
    anchors.right: testTabBar.right
    policy: ScrollBar.AlwaysOn
    // 关联到TabBar内部的Flickable滚动容器
    target: testTabBar.flickableItem
}

关键说明 #

• 避免直接给TabBar设置ScrollBar.horizontal附加属性，通过target属性关联TabBar内部的flickableItem才是正确的绑定方式
• 将ScrollBar的父级设为TabBar的同级容器（比如页面根元素），避免布局嵌套引发的冲突
• 显式声明scrollable: true可增强代码可读性，确保TabBar处于可滚动状态（默认值为true，可省略）

内容的提问来源于stack exchange，提问作者Rick