当前位置：首页 > news >正文

QML旋转选择器组件Tumbler

news 2025/7/2 1:02:12

1. 介绍

Tumbler是一个用于创建旋转选择器的组件。它提供了一种直观的方式来让用户从一组选项中进行选择，类似于转盘式数字密码锁。网上找的类似网图如下：
在QML里，这种组件一共有两个版本，分别在QtQuick.Extras 1.4(旧)和QtQuick.Controls 2.15(新)里。

2.QtQuick.Extras 1.4版本

Tumbler控件需要与一个或多个TumblerColumn项一起使用，它们定义了每个列的内容。
TumblerColumn的model属性保存本列的数据模型。
在这里插入图片描述
也可以使用带有角色的模型：

ListModel {id: listModelListElement {foo: "A1"bar: "B1"baz: "C1"}ListElement {foo: "A2"bar: "B2"baz: "C2"}ListElement {foo: "A3"bar: "B3"baz: "C3"}}Tumbler {anchors.centerIn: parentTumblerColumn {model: listModelrole: "foo"}TumblerColumn {model: listModelrole: "bar"}TumblerColumn {model: listModelrole: "baz"}}

在这里插入图片描述
我们还可以自定义它的样式，定义整个Tumbler外观可以使用TumblerStyle，定义单列外观的就使用TumblerColumn的delegate和highlight属性。这版有很多bug，就不演示了。

3.QtQuick.Controls 2.15版本

Component {id: cusDelgateText {text: modelDataopacity: 0.8horizontalAlignment: Text.AlignHCenterverticalAlignment: Text.AlignVCenterfont.pixelSize: 16}}Row {id: row_layanchors.fill: parentTumbler {id: hoursTumblermodel: 12delegate: cusDelgatevisibleItemCount: 3     // 可见项数wrap: false             // 是否环绕(循环展示内容)}Tumbler {id: minutesTumblermodel: 60delegate: cusDelgate}Tumbler {id: amPmTumblermodel: ["AM", "PM"]delegate: cusDelgate}}

结果展示：
在这里插入图片描述
自定义Tumbler:

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)}Rectangle {anchors.horizontalCenter: control.horizontalCentery: control.height * 0.4width: 40height: 1color: "#21be2b"}Rectangle {anchors.horizontalCenter: control.horizontalCentery: control.height * 0.6width: 40height: 1color: "#21be2b"}}