• Home
• Qt 6.4
• Qt Quick Controls
• QML Types
• Tumbler

Tumbler

Spinnable wheel of items that can be selected. More...

• List of all members, including inherited members

Properties

• count : int
• currentIndex : int
• currentItem : Item
• delegate : Component
• model : variant
• moving : bool
• visibleItemCount : int
• wrap : bool

Attached Properties

• displacement : real
• tumbler : Tumbler

Methods

• void positionViewAtIndex(int index, PositionMode mode)

Detailed Description

Tumbler {
    model: 5
    // ...
}

Tumbler allows the user to select an option from a spinnable "wheel" of items. It is useful for when there are too many options to use, for example, a RadioButton, and too few options to require the use of an editable SpinBox. It is convenient in that it requires no keyboard usage and wraps around at each end when there are a large number of items.

The API is similar to that of views like ListView and PathView; a model and delegate can be set, and the count and currentItem properties provide read-only access to information about the view. To position the view at a certain index, use positionViewAtIndex().

Unlike views like PathView and ListView, however, there is always a current item (when the model isn't empty). This means that when count is equal to 0, currentIndex will be -1. In all other cases, it will be greater than or equal to 0.

By default, Tumbler wraps when it reaches the top and bottom, as long as there are more items in the model than there are visible items; that is, when count is greater than visibleItemCount:

import QtQuick
import QtQuick.Window
import QtQuick.Controls

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

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

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

See also Customizing Tumbler and Input Controls.

Property Documentation

Attached Property Documentation

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

Method Documentation

positionViewAtIndex(10, Tumbler.Center)