一、描述

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

Tumbler {model: 10
}

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

import QtQuick
import QtQuick.Window
import QtQuick.ControlsWindow
{id: windowwidth: 800height: 600visible: truefunction formatText(count,modelData){var data = (count === 12) ? modelData + 1 : modelData;return data.toString().length < 2 ? "0" + data : data;}Rectangle {width: frame.implicitWidth + 10height: frame.implicitHeight + 10FontMetrics {id: fontMetrics}Component{id: delegateComponentLabel{text: formatText(Tumbler.tumbler.count, modelData)opacity: 1.0 - Math.abs(Tumbler.displacement) / (Tumbler.tumbler.visibleItemCount / 2)horizontalAlignment: Text.AlignHCenterverticalAlignment: Text.AlignVCenterfont.pixelSize: fontMetrics.font.pixelSize * 1.25}}Frame {id: framepadding: 0anchors.centerIn: parentRow {id: rowTumbler {id: hoursTumblermodel: 12delegate: delegateComponent}Tumbler {id: minutesTumblermodel: 60delegate: delegateComponent}Tumbler{id: amPmTumblermodel: ["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: modelDataopacity: 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.ControlsWindow {width: 640height: 480visible: truetitle: qsTr("Hello World")Tumbler {id: controlmodel: 15background: Item {Rectangle {opacity: control.enabled ? 0.2 : 0.1border.color: "#000000"width: parent.widthheight: 1anchors.top: parent.top}Rectangle {opacity: control.enabled ? 0.2 : 0.1border.color: "#000000"width: parent.widthheight: 1anchors.bottom: parent.bottom}}delegate: Text {text: qsTr("Item %1").arg(modelData + 1)font: control.fonthorizontalAlignment: Text.AlignHCenterverticalAlignment: Text.AlignVCenteropacity: 1.0 - Math.abs(Tumbler.displacement) / (control.visibleItemCount / 2)required property var modelDatarequired property int index}Rectangle {anchors.horizontalCenter: control.horizontalCentery: control.height * 0.4width: 40height: 1color: "#21be2b"}Rectangle {anchors.horizontalCenter: control.horizontalCentery: control.height * 0.6width: 40height: 1color: "#21be2b"}}
}

QML控件类型：Tumbler相关推荐

QML控件类型：ToolTip
一.描述 ToolTip 继承自 Popup,可以为任何控件提供工具提示.工具提示是通知用户控件功能的一小段文本.它通常放置在父控件的上方或下方. 提示文本可以是任何富文本格式的字符串. 1.1.附加 ...
QML控件类型：Dial
一.描述仪表盘控件,继承自 Control. 表盘可以用键盘操作.支持以下操作: Qt.Key_Left:按 stepSize 减小值 Qt.Key_Down:按 stepSize 减小值 Qt.K ...
QML控件类型：ComboBox
一.描述 ComboBox 是一个组合按钮和弹出列表. 它提供了一种以占用最少屏幕空间的方式向用户呈现选项列表的方法. ComboBox 填充有数据模型.数据模型通常是 JavaScript 数组.L ...
QML控件类型：Menu
一.描述可用作上下文菜单或弹出菜单的菜单弹出窗口. 当用作上下文菜单: MouseArea {anchors.fill: parentacceptedButtons: Qt.LeftButton | ...
QML控件类型：StackView
一.描述 StackView 提供栈式导航.它的特点是用类似于栈的方式管理一系列界面,这些界面之间可能有内在联系,根据业务需要,可以一级一级向前面跳转或返回后面的界面. import QtQuick ...
QML控件类型：Drawer
一.描述 Drawer 提供一个可以使用滑动手势打开和关闭的侧面板.继承自 Popup. Drawer 可以从上下左右四个方向打开. import QtQuick import QtQuick.Con ...
Qt quick基础2（包含平移旋转放缩以及qml控件大写开头啊）
Qt quick基础2(包含平移旋转放缩以及qml控件大写开头啊) 目录 Qt quick基础2(包含平移旋转放缩以及qml控件大写开头啊) 前言简单的平移.旋转和放缩其他元素的一些基本使用 qm ...
Qml控件：ComboBox
Qml控件:ComboBox ComboBox默认状态定制ComboBox 1.定制框架 2.定制指示器 3.定制背景 4.定制内容 5.定制弹框 6.定制弹框Item 7.弹框项的点击 8.定制删 ...
如果知道一个控件类型的对话框句柄是编辑框控件
如果知道一个控件类型的对话框句柄是编辑框控件 TCHAR chs[256]; ::GetClassName(pCtrl->m_hWnd, chs, 256); CString str(chs ...

QML控件类型：Tumbler