Tumbler QML Type

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 2.12
 import QtQuick.Window 2.2
 import QtQuick.Controls 2.12

 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)