QML控件类型：ScrollBar、ScrollIndicator

友善啊，朋友

已于 2022-07-02 12:36:12 修改

阅读量6k

点赞数 12

分类专栏： # QML控件类型文章标签： qml

于 2022-01-16 14:45:59 首次发布

本文链接：https://blog.csdn.net/kenfan1647/article/details/122522063

版权

QML控件类型专栏收录该内容

29 篇文章 58 订阅

订阅专栏

ScrollBar

一、描述

ScrollBar 是滚动条控件，可用于滚动到特定位置。滚动条可以附加到任何 Flickable，例如 ListView 和 GridView。

Flickable {
    // ...
    ScrollBar.vertical: ScrollBar { }
}

1.1、将 ScrollBar 附加到 Flickable

当 ScrollBar 垂直或水平附加到 Flickable 时，它的几何图形和以下属性会根据需要自动设置和更新：

orientation
position
size
active

垂直连接的 ScrollBar 将自身调整到 Flickable 的高度，并根据布局方向将自身定位到其任一侧。水平连接的 ScrollBar 将自身调整为 Flickable 的宽度，并将自身定位到底部。

可以通过为附加的 ScrollBar 指定另一个父级来禁用自动几何管理。如：

    Flickable {
        id: flickable
        clip: true
        // ...
        ScrollBar.vertical: ScrollBar {
            parent: flickable.parent    //设置另一个父级
            anchors.top: flickable.top
            anchors.left: flickable.right
            anchors.bottom: flickable.bottom
        }
    }

ScrollBar 不会过滤它附加到的 Flickable 的按键事件。以下示例说明了如何使用向上和向下键实现滚动：

Flickable {
    focus: true

    Keys.onUpPressed: scrollBar.decrease()
    Keys.onDownPressed: scrollBar.increase()

    ScrollBar.vertical: ScrollBar { id: scrollBar }
}

1.2、绑定水平和垂直滚动条的活动状态

默认情况下，水平和垂直滚动条彼此不共享活动状态。为了在滚动到任一方向时保持两个栏可见，可在活动状态之间建立双向绑定，如下例所示：

Flickable {
    anchors.fill: parent

    contentWidth: parent.width * 2
    contentHeight: parent.height * 2

    ScrollBar.horizontal: ScrollBar { id: hbar; active: vbar.active }
    ScrollBar.vertical: ScrollBar { id: vbar; active: hbar.active }
}

1.3、非附加滚动条

可以在不使用附加属性 API 的情况下创建 ScrollBar 的实例。当附加的滚动条的行为不充分或未使用 Flickable 时，这很有用。在下面的示例中，水平和垂直滚动条用于在不使用 Flickable 的情况下滚动文本：

import QtQuick 2.14
import QtQuick.Window 2.14
import QtQuick.Controls

Window {
    width: 640
    height: 480
    visible: true
    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: 160
            x: -hbar.position * width
            y: -vbar.position * 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
        }
    }
}

使用非附加滚动条时，必须手动完成以下操作：

布局滚动条（例如，使用 x 和 y 或 anchors 属性）。
设置 size 和 position 属性以确定滚动条相对于滚动项的大小和位置。
设置 active 属性以确定滚动条何时可见。

二、属性成员

1、active : bool

滚动条是否处于活动状态，即当它被按下或附加的 Flickable 正在移动时。

2、[read-only] horizontal : bool / [read-only] vertical : bool

滚动条是否水平 / 垂直。

orientation : enumeration

滚动条方向。

Qt.Horizontal
Qt.Vertical：默认。

3、interactive : bool

滚动条是否是交互式的。默认值是true。

非交互式滚动条在视觉和行为上类似于 ScrollIndicator。

4、minimumSize : real

滚动条的最小尺寸，范围：0.0 - 1.0。

size : real

滚动条的大小，范围：0.0 - 1.0。

visualSize : real

滚动条的有效视觉尺寸，可能受 minimumSize 限制。

5、policy : enumeration

滚动条的策略。默认策略是 ScrollBar.AsNeeded。

ScrollBar.AsNeeded：滚动条仅在内容太大而无法容纳时显示。
ScrollBar.AlwaysOff：始终不会显示滚动条。
ScrollBar.AlwaysOn：始终显示滚动条。

6、position : real

滚动条的位置，范围是：0.0 - 1.0。

7、pressed : bool

滚动条是否被按下。

8、snapMode : enumeration

对齐模式。

ScrollBar.NoSnap：滚动条不对齐（默认）。
ScrollBar.SnapAlways：滚动条在拖动时对齐。
ScrollBar.SnapOnRelease：滚动条在拖动时不会对齐，只有在释放后才会对齐。

9、stepSize : real

步长。

10、visualPosition : real

滚动条的有效视觉位置，可能受 minimumSize 限制。

三、附加属性成员

1、ScrollBar.horizontal : ScrollBar

此属性将水平滚动条附加到 Flickable。
Flickable {
    contentWidth: 2000
    ScrollBar.horizontal: ScrollBar { }
}

2、ScrollBar.vertical : ScrollBar

此属性将垂直滚动条附加到 Flickable。

四、成员函数

1、void decrease()

按 stepSize 或 0.1 （未设置 stepSize 时）减小 position 。

2、void increase()

按 stepSize 或 0.1 （未设置 stepSize 时）增加 position 。

ScrollIndicator

一、描述

ScrollIndicator 是指示当前滚动位置的非交互式指示器。滚动指示器可以是垂直的也可以是水平的，并且可以附加到任何 Flickable，例如 ListView 和 GridView。即它只指示拖动状态但不可交互，使用方式和 ScrollBar 一样。

1.1、非附加滚动指示器

可以在不使用附加属性 API 的情况下创建 ScrollIndicator 的实例。当附加的 ScrollIndicator 的行为不充分或 Flickable 未使用时，这很有用。在以下示例中，水平和垂直滚动指示器用于指示用户在文本上滚动了多远（使用 MouseArea 而不是 Flickable）：

import QtQuick 2.14
import QtQuick.Window 2.14
import QtQuick.Controls

Window {
    width: 640
    height: 480
    visible: true
    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; right: parent.right; 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; right: parent.right; bottom: parent.bottom }
        }
    }
}

二、属性成员

与 ScrollBar 比较，ScrollIndicator 没有交互相关的属性：

三、附加属性成员

与 ScrollBar 类似。

四、自定义 ScrollIndicator 示例

import QtQuick 2.14
import QtQuick.Window 2.14
import QtQuick.Controls

Window {
    width: 640
    height: 480
    visible: true
    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; right: parent.right; bottom: parent.bottom }

            contentItem: Rectangle {
                implicitWidth: 2
                color: "#ff0000"
            }

        }

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

            contentItem: Rectangle {
                implicitHeight: 2
                color: "#ff0000"
            }
        }
    }
}

友善啊，朋友

关注

12
点赞
踩
34

收藏

觉得还不错? 一键收藏
0
评论
QML控件类型：ScrollBar、ScrollIndicator

ScrollBar一、描述ScrollBar 是滚动条控件，可用于滚动到特定位置。滚动条可以附加到任何 Flickable，例如 ListView 和 GridView。Flickable { // ... ScrollBar.vertical: ScrollBar { }}1.1、将 ScrollBar 附加到 Flickable当 ScrollBar 垂直或水平附加到 Flickable 时，它的几何图形和以下属性会根据需要自动设置和更新：orientatio
复制链接

扫一扫