qml 滚动控件Scroll ScrollBar ScrollIndicator ScrollView


import QtQuick.Layouts 1.3

交互式滚动条ScrollBar

交互式即与操作有互动。次控件用于滚动到特定位置

  • 属性
    active : bool，保存滚动条是否处于活跃状态
    horizontal : bool，保存滚动条是否为水平
    interactive : bool，保存滚动条是否为交互式。默认值为true
    minimumSize : real，保存滚动条的最小大小
    orientation : enumeration，保存滚动条的方向
    policy : enumeration，保存滚动条的策略。1）默认策略是ScrollBar.AsNeeded 仅当内容太大而无法完全容纳时，才会显示滚动条 2）ScrollBar.AlwaysOff 滚动条从不显示 3）ScrollBar.AlwaysOn 滚动条始终显示
    position : real，保存滚动条的位置
    pressed : bool，保存是否按下滚动条
    size : real，保存滚动条的大小
    snapMode : enumeration，保留捕捉模式
    stepSize : real，保存步长
    vertical : bool，保存滚动条是否垂直
    visualPosition : real，保留滚动条的有效视觉位置
    visualSize : real，保留滚动条的有效视觉尺寸
  • 方法
    void decrease()
    void increase()

在这里插入图片描述

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("test")
    color: "gray"

    Rectangle {
            id: frame
            clip: true //设置为true文字text才不会全部显示
            width: 160
            height: 160
            border.color: "black"
            anchors.centerIn: parent

            Text {
                id: content
                text: "ABC"
                font.pixelSize: 160
                //加负号的原因是ScrollBar的position位置越大，Text里面的文本就要像相反方向移动的越多
                x: -hbar.position * frame.width
                y: -vbar.position * frame.height
            }

            ScrollBar {
                id: vbar
                hoverEnabled: true
                active: hovered || pressed
                orientation: Qt.Vertical
                size: frame.height / content.height
                anchors.top: parent.top
                anchors.right: parent.right
                anchors.bottom: parent.bottom
            }

            ScrollBar {
                id: hbar
                hoverEnabled: true
                active: hovered || pressed
                orientation: Qt.Horizontal
                size: frame.width / content.width
                anchors.left: parent.left
                anchors.right: parent.right
                anchors.bottom: parent.bottom
            }
        }
}

非交互式滚动条ScrollIndicator

此指示器指示当前滚动位置

  • 属性
    active : bool，保存滚动条是否处于活跃状态
    horizontal : bool，保存滚动条是否为水平
    minimumSize : real，保存滚动条的最小大小
    orientation : enumeration，保留捕捉模式
    position : real，保存滚动条的位置
    size : real，保存滚动条的大小
    vertical : bool，保存滚动条是否垂直
    visualPosition : real，保留滚动条的有效视觉位置
    visualSize : real，保留滚动条的有效视觉尺寸

在这里插入图片描述
因为没有交互性，所以只能鼠标拖拽事件拖动

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("test")
    color: "gray"

    Rectangle {
        id: frame
        clip: true
        width: 160
        height: 160
        border.color: "black"
        anchors.centerIn: parent

        Text {
            id: content
            text: "ABC"
            font.pixelSize: 169

            MouseArea {
                id: mouseArea
                drag.target: content
                drag.minimumX: frame.width - width
                drag.minimumY: frame.height - height
                drag.maximumX: 0
                drag.maximumY: 0
                anchors.fill: content
            }
        }

        ScrollIndicator {
            id: verticalIndicator
            active: mouseArea.pressed
            orientation: Qt.Vertical
            size: frame.height / content.height
            position: -content.y / content.height
            anchors.top: parent.top
            anchors.right: parent.right
            anchors.bottom: parent.bottom
        }

        ScrollIndicator {
            id: horizontalIndicator
            active: mouseArea.pressed
            orientation: Qt.Horizontal
            size: frame.width / content.width
            position: -content.x / content.width
            anchors.left: parent.left
            anchors.right: parent.right
            anchors.bottom: parent.bottom
        }
    }
}

滚动视图ScrollView

提供用户定义内容滚动

  • 属性
    contentChildren : list，保存内容子级列表
    contentData : list，保存内容数据列表

在这里插入图片描述
ScrollView是一种视图，我们只需要在视图中定义需要显示的控件，当控件的尺寸大于视图的大小时，视图会自动的增加水平和垂直方向的滚动条

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("test")
    color: "gray"

    ScrollView {
        width: 200
        height: 200
        clip: true
        anchors.centerIn: parent
        Label {
            text: "ABC"
            font.pixelSize: 224
        }
    }
}