一、描述

Tumbler 用于通过旋转轮子来选择一个值。

Tumbler {
    model: 10
}

API 类似于 ListView 和 PathView 等视图的 API。可以设置模型和委托，并且 count 和 currentItem 属性提供对视图信息的只读访问。与 PathView 和 ListView 之类的视图不同的是始终存在一个当前项（当模型不为空时）。即当 count 等于 0 时，currentIndex 将为 -1。在所有其他情况下，它将大于或等于 0。

import QtQuick
import QtQuick.Window
import QtQuick.Controls

Window
{
    id: window

    width: 800
    height: 600
    visible: true

    function formatText(count,modelData)
    {
        var data = (count === 12) ? modelData + 1 : modelData;
        return data.toString().length < 2 ? "0" + data : data;
    }

    Rectangle 
    {
        width: frame.implicitWidth + 10
        height: frame.implicitHeight + 10

        FontMetrics 
        {
            id: fontMetrics
        }

        Component
        {

            id: delegateComponent

            Label
            {
                text: formatText(Tumbler.tumbler.count, modelData)
                opacity: 1.0 - Math.abs(Tumbler.displacement) / (Tumbler.tumbler.visibleItemCount / 2)
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
                font.pixelSize: fontMetrics.font.pixelSize * 1.25
            }
        }

        Frame 
        {
            id: frame
            padding: 0
            anchors.centerIn: parent

            Row 
            {
                id: row

                Tumbler 
                {
                    id: hoursTumbler
                    model: 12
                    delegate: delegateComponent
                }

                Tumbler 
                {
                    id: minutesTumbler
                    model: 60
                    delegate: delegateComponent
                }

                Tumbler
                {
                    id: amPmTumbler
                    model: ["AM", "PM"]
                    delegate: delegateComponent
                }
            }
        }
    }
}

二、属性成员

1、【只读】count : int

模型中的项目数。

2、currentIndex : int

当前项目的索引。当 count 等于 0 时，此属性值为 -1。在其他情况下，它将大于或等于 0。

3、【只读】currentItem : Item

当前索引的项目。

4、delegate : Component

用于显示每个项目的委托。

5、model : variant

提供数据的模型。

6、moving : bool

由于用户拖动或轻弹，此属性描述了当前是否正在移动。

7、visibleItemCount : int

可见的项目数。它必须是奇数，因为当前项目始终垂直居中。

8、wrap : bool

当到达顶部或底部时，是否环绕。当 count 小于 visibleItemCount 时，默认值为 false。

三、附加属性成员

1、【只读】Tumbler.displacement : real

此附加属性保存从 -visibleItemCount / 2 到 visibleItemCount / 2 的值，表示该项目与当前项目的距离，0 表示是当前值。

项目在非 currentItem 时变为 40% 不透明，当成为 currentItem 时会过渡到 100% 不透明度：

delegate: Text {
    text: modelData
    opacity: 0.4 + Math.max(0, 1 - Math.abs(Tumbler.displacement)) * 0.6
}

2、【只读】Tumbler.tumbler : Tumbler

该属性可以附加到委托。如果项目不是 Tumbler 委托，则该值为 null。

四、函数成员

1、void positionViewAtIndex(int index, PositionMode mode)

定位视图，使索引位于 mode 指定的位置。

五、自定义 Tumbler 示例

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

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

    Tumbler {
        id: control
        model: 15

        background: Item {
            Rectangle {
                opacity: control.enabled ? 0.2 : 0.1
                border.color: "#000000"
                width: parent.width
                height: 1
                anchors.top: parent.top
            }

            Rectangle {
                opacity: control.enabled ? 0.2 : 0.1
                border.color: "#000000"
                width: parent.width
                height: 1
                anchors.bottom: parent.bottom
            }
        }

        delegate: Text {
            text: qsTr("Item %1").arg(modelData + 1)
            font: control.font
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter
            opacity: 1.0 - Math.abs(Tumbler.displacement) / (control.visibleItemCount / 2)

            required property var modelData
            required property int index
        }

        Rectangle {
            anchors.horizontalCenter: control.horizontalCenter
            y: control.height * 0.4
            width: 40
            height: 1
            color: "#21be2b"
        }

        Rectangle {
            anchors.horizontalCenter: control.horizontalCenter
            y: control.height * 0.6
            width: 40
            height: 1
            color: "#21be2b"
        }
    }
}