Tumbler QML Type

A spinnable wheel of items that can be selected. More...

Import Statement:	import QtQuick.Controls 2.0
Since:	Qt 5.7
Inherits:	Control

List of all members, including inherited members

Properties

count : int
currentIndex : int
currentItem : Item
delegate : component
model : variant
visibleItemCount : int

Attached Properties

displacement : real
tumbler : Tumbler

Detailed Description


  Tumbler {
      model: 5
      // ...
  }

Non-wrapping Tumbler

The default contentItem of Tumbler is a PathView, which wraps when it reaches the top and bottom. To achieve a non-wrapping Tumbler, use ListView as the contentItem:


  Tumbler {
      id: listViewTumbler

      contentItem: ListView {
          anchors.fill: parent
          model: listViewTumbler.model
          delegate: listViewTumbler.delegate

          snapMode: ListView.SnapToItem
          highlightRangeMode: ListView.StrictlyEnforceRange
          preferredHighlightBegin: height / 2 - (height / listViewTumbler.visibleItemCount / 2)
          preferredHighlightEnd: height / 2  + (height / listViewTumbler.visibleItemCount / 2)
          clip: true
      }
  }

See also Customizing Tumbler and Input Controls.

Property Documentation

[read-only] count : int

This property holds the number of items in the model.

currentIndex : int

This property holds the index of the current item.

[read-only] currentItem : Item

This property holds the item at the current index.

delegate : component

This property holds the delegate used to display each item.

model : variant

This property holds the model that provides data for this tumbler.

visibleItemCount : int

This property holds the number of items visible in the tumbler. It must be an odd number, as the current item is always vertically centered.

Attached Property Documentation

[read-only] Tumbler.displacement : real

This attached property holds a value from -visibleItemCount / 2 to visibleItemCount / 2, which represents how far away this item is from being the current item, with 0 being completely current.

For example, the item below will be 40% opaque when it is not the current item, and transition to 100% opacity when it becomes the current item:


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

[read-only] Tumbler.tumbler : Tumbler

This attached property holds the tumbler. The property can be attached to a tumbler delegate. The value is null if the item is not a tumbler delegate.

Contents