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()

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，保留滚动条的有效视觉尺寸

因为没有交互性，所以只能鼠标拖拽事件拖动

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是一种视图，我们只需要在视图中定义需要显示的控件，当控件的尺寸大于视图的大小时，视图会自动的增加水平和垂直方向的滚动条

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
        }
    }
}