ScrollView中自定义Horizontal ScrollBar不显示且失效的问题

你的代码存在两个核心问题，导致水平滚动条无法正常显示和工作：

• TextArea未触发水平滚动需求：你给TextArea设置了implicitWidth: 200，和外层ScrollView的宽度完全一致，文本不会超出容器范围，滚动条自然没有显示的必要。
• 水平滚动条尺寸属性设置错误：水平方向的ScrollBar应该通过height定义自身厚度，你当前设置的width:8会导致滚动条的高度被默认值拉伸，布局逻辑混乱。

修正后的代码 #

import QtQuick
import QtQuick.Controls.Basic

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")
    ScrollView{
        width: 200
        height: 200
        ScrollBar.horizontal: ScrollBar{
            id: test
            // 水平滚动条设置height定义厚度
            height: 8
            policy: ScrollBar.AlwaysOn
            orientation: Qt.Horizontal
            opacity: 1
            background: Rectangle{
                radius: 4
                color: "transparent"
            }
            contentItem: Rectangle{
                radius: 4
                color: "green"
            }
        }
        TextArea{
            id: editor
            // 移除固定宽度限制，让文本自然超出容器
            text: "C++ (C Plus Plus) is a powerful, general-purpose, object-oriented programming language, an extension of the C language, known for its speed, efficiency, and low-level memory control, making it ideal for high-performance applications like operating systems, game engines, graphics, and resource-intensive software. Add more text to trigger horizontal overflow: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
        }
    }  
}

补充说明 #

1. 移除TextArea的implicitWidth限制后，文本会根据内容长度自动扩展，超出ScrollView宽度时就会触发水平滚动逻辑。
2. 水平滚动条通过height:8定义自身厚度，ScrollView会自动管理它的宽度和位置，无需手动设置锚点（手动锚点可能干扰原生布局逻辑）。
3. policy: ScrollBar.AlwaysOn可以强制显示滚动条，但只有当存在滚动需求时，滚动条才会处于可用状态。

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