QML 容器控件：ScrollView

Quz

于 2025-03-07 08:15:00 发布

阅读量1k

点赞数 32

分类专栏： Qt6 QML学习之路文章标签： qt

本文链接：https://blog.youkuaiyun.com/u011186532/article/details/146010632

版权

Qt6 QML学习之路专栏收录该内容

51 篇文章

订阅专栏

ScrollView是 QML 中用于创建可滚动视图的控件，它允许用户通过触摸或鼠标操作来滚动内容。ScrollView是 QtQuick.Controls模块的一部分，通常用于替代 Flickable或装饰现有的可滚动控件（如 ListView或 GridView）。以下是关于 ScrollView的详细介绍：

1. ScrollView 简介

ScrollView是一个用于显示可滚动内容的控件。它提供了滚动条，并支持触摸和鼠标交互。与 Flickable不同，ScrollView提供了更丰富的功能，例如内置的滚动条和更灵活的滚动策略。

1.1 主要特点

滚动功能

ScrollView支持水平和垂直滚动，用户可以通过触摸滑动或鼠标拖动滚动条来滚动内容。

滚动条自定义

可以通过 ScrollBar.horizontal和 ScrollBar.vertical附加属性自定义滚动条的外观和行为，包括滚动条的策略（如始终显示、始终隐藏或根据需要显示）。

内容大小管理

如果 ScrollView中只有一个子项，内容大小会自动根据子项的隐式大小计算。
如果有多个子项或未提供隐式大小，则需要手动设置 contentWidth和 contentHeight。

触摸与鼠标交互

在触摸设备上，ScrollView支持快速滑动（flicking），滚动条不可交互。
在鼠标交互时，滚动条变为可交互，滑动功能被禁用。

内容裁剪

自 Qt 6.0 起，ScrollView默认会裁剪其内容，除非子项是 Flickable。如果需要禁用裁剪，可以显式设置子项的 clip属性。

滚动策略

可以通过设置滚动条的 policy属性来控制滚动条的行为，例如：

ScrollBar.AlwaysOn：滚动条始终显示。
ScrollBar.AlwaysOff：滚动条始终隐藏。
ScrollBar.AsNeeded：根据内容大小动态显示滚动条。

属性

contentChildren：包含所有作为视图子项的可视元素。
contentData：包含所有作为视图子项的对象（包括非可视对象）。
effectiveScrollBarWidth：垂直滚动条的实际宽度（自 Qt 6.6 起）。
effectiveScrollBarHeight：水平滚动条的实际高度（自 Qt 6.6 起）。

2. 使用示例

以下是一些使用 ScrollView的示例：

2.1 简单的 ScrollView

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

Window {
    width: 300
    height: 300
    visible: true
    title: qsTr("Hello World")

    ScrollView {
        anchors.fill: parent

        ScrollBar.vertical.policy: ScrollBar.AlwaysOn
        ScrollBar.vertical.interactive: true

        ColumnLayout {
            anchors.fill: parent
            anchors.margins: 10

            Repeater {
                model: 20
                delegate: Text {
                    text: "Scroll me !"
                }
            }
        }
    }
}

这段代码创建了一个宽高均为300像素的窗口，窗口中包含一个垂直滚动的ScrollView，其内部通过ColumnLayout和Repeater动态生成了20个显示“Scroll me !”的文本项，滚动条始终显示且可交互。

运行效果：

2.2 使用 ListView作为子项

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

Window {
    width: 300
    height: 300
    visible: true
    title: qsTr("Hello World")

    ScrollView {
        width: parent.width
        height: parent.height

        ListView {
            model: 20
            delegate: ItemDelegate {
                text: "Item " + index
                width: parent.width
            }
        }
    }
}

这段代码创建了一个宽高均为300像素的窗口，窗口中包含一个ScrollView，其内部通过ListView动态生成20个显示编号的ItemDelegate项，实现垂直滚动功能。

运行效果：