ScrollView QML Type

可滚动视图。更多

• 所有成员（包括继承成员）的列表

属性

• contentChildren : list<Item>
• contentData : list<QtObject>
• effectiveScrollBarHeight : real (since 6.6)
• effectiveScrollBarWidth : real (since 6.6)

详细说明

ScrollView 为用户定义的内容提供滚动功能。它既可以用来替换Flickable ，也可以用来装饰现有的内容。

第一个示例演示了 ScrollView 的最简单用法。

ScrollView {
    width: 200
    height: 200

    Label {
        text: "ABC"
        font.pixelSize: 224
    }
}

第二个示例说明了如何使用现有的Flickable ，即ListView 。

ScrollView {
    width: 200
    height: 200

    ListView {
        model: 20
        delegate: ItemDelegate {
            text: "Item " + index

            required property int index
        }
    }
}

大小

与 Flickable 一样，使用 ScrollView 时也有几件事需要注意：

• 如果 ScrollView 中只使用了单个项目，那么内容大小会根据其所包含项目的隐式大小自动计算。但是，如果使用了多个项目（或未提供隐式尺寸），则必须将contentWidth 和contentHeight 属性设置为所含项目的组合尺寸。
• 如果内容大小小于或等于 ScrollView 的大小，则无法滚动。
• 如果希望 ScrollView 只垂直滚动，可以将contentWidth 绑定到availableWidth （反之亦然，将 contentHeight 绑定到 ）。这样，在考虑到任何填充或滚动条的情况下，内容将填满 ScrollView 内水平方向的所有可用空间。

滚动条

水平和垂直滚动条可使用ScrollBar.horizontal 和ScrollBar.vertical 附加属性进行访问和自定义。下面的示例调整了滚动条策略，使水平滚动条始终处于关闭状态，而垂直滚动条始终处于打开状态。

ScrollView {
    // ...
    ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
    ScrollBar.vertical.policy: ScrollBar.AlwaysOn
}

触摸与鼠标交互

在触摸状态下，ScrollView 会启用滑动功能，并使滚动条非交互式。

在与鼠标设备交互时，弹动功能被禁用，滚动条是交互式的。

通过将interactive 属性显式设置为true 或false ，可以使滚动条在触摸时交互，或在与鼠标设备交互时非交互。

ScrollView {
    // ...
    ScrollBar.horizontal.interactive: true
    ScrollBar.vertical.interactive: true
}

另请参阅 ScrollBar,ScrollIndicator,Customizing ScrollView,Container Controls, andFocus Management inQt Quick Controls 。

属性文档