QML_滚动控件Scroll

QML_滚动控件Scroll

滚动控件Scroll属性：
1、 active : bool，保存滚动条是否处于活跃状态
2、horizontal : bool，保存滚动条是否为水平
3、interactive : bool，保存滚动条是否为交互式。默认值为true
4、minimumSize : real，保存滚动条的最小大小
5、orientation : enumeration，保存滚动条的方向
6、policy : enumeration，保存滚动条的策略。默认策略是ScrollBar.AsNeeded
7、position : real，保存滚动条的位置
8、pressed : bool，保存是否按下滚动条
9、size : real，保存滚动条的大小
10、snapMode : enumeration，保留捕捉模式
11、stepSize : real，保存步长
12、vertical : bool，保存滚动条是否垂直
13、visualPosition : real，保留滚动条的有效视觉位置
14、visualSize : real，保留滚动条的有效视觉尺寸
方法
void decrease()
void increase()
导入控件库
import QtQuick.Layouts 1.3

这里是引用

Window {
    id: window
    visible: true
    width: 800
    height: 480
    title: qsTr("Hello World")

    Rectangle {
        id: frame
        clip: true  //必须设置为true，否则窗口里面的文字会直接全部暴露出现
        width: 160
        height: 160
        border.color: "black"
        anchors.centerIn: parent

        Text {
            id: content
            text: "ABC"
            font.pixelSize: 320
            x: -hbar.position * content.width
            y: -vbar.position * content.height
        }

        ScrollBar {
            id: vbar
            hoverEnabled: true
            active: hovered || pressed
            orientation: Qt.Vertical
            size: frame.height / content.height  //滚动条的大小，取值0~1，以确定滚动条相对于滚动项的大小和位置
            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属性
1、active : bool，保存滚动条是否处于活跃状态
2、horizontal : bool，保存滚动条是否为水平
3、minimumSize : real，保存滚动条的最小大小
4、orientation : enumeration，保留捕捉模式
5、position : real，保存滚动条的位置
6、size : real，保存滚动条的大小
7、vertical : bool，保存滚动条是否垂直
8、visualPosition : real，保留滚动条的有效视觉位置
9、visualSize : real，保留滚动条的有效视觉尺寸

Window {
    id: window
    visible: true
    width: 800
    height: 480
    title: qsTr("Hello World")

    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

Window {
    id: window
    visible: true
    width: 800
    height: 480
    title: qsTr("Hello World")

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