1. 介绍
Tumbler
是一个用于创建旋转选择器的组件。它提供了一种直观的方式来让用户从一组选项中进行选择,类似于转盘式数字密码锁。网上找的类似网图如下:
在QML里,这种组件一共有两个版本,分别在QtQuick.Extras 1.4(旧)和QtQuick.Controls 2.15(新)里。
2.QtQuick.Extras 1.4版本
Tumbler控件需要与一个或多个TumblerColumn
项一起使用,它们定义了每个列的内容。
TumblerColumn的model属性保存本列的数据模型。
也可以使用带有角色的模型:
ListModel {
id: listModel
ListElement {
foo: "A1"
bar: "B1"
baz: "C1"
}
ListElement {
foo: "A2"
bar: "B2"
baz: "C2"
}
ListElement {
foo: "A3"
bar: "B3"
baz: "C3"
}
}
Tumbler {
anchors.centerIn: parent
TumblerColumn {
model: listModel
role: "foo"
}
TumblerColumn {
model: listModel
role: "bar"
}
TumblerColumn {
model: listModel
role: "baz"
}
}
我们还可以自定义它的样式,定义整个Tumbler外观可以使用TumblerStyle,定义单列外观的就使用TumblerColumn的delegate和highlight属性。这版有很多bug,就不演示了。
3.QtQuick.Controls 2.15版本
Component {
id: cusDelgate
Text {
text: modelData
opacity: 0.8
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
font.pixelSize: 16
}
}
Row {
id: row_lay
anchors.fill: parent
Tumbler {
id: hoursTumbler
model: 12
delegate: cusDelgate
visibleItemCount: 3 // 可见项数
wrap: false // 是否环绕(循环展示内容)
}
Tumbler {
id: minutesTumbler
model: 60
delegate: cusDelgate
}
Tumbler {
id: amPmTumbler
model: ["AM", "PM"]
delegate: cusDelgate
}
}
结果展示:
自定义Tumbler:
Tumbler {
id: control
model: 15
background: Item {
Rectangle {
opacity: control.enabled ? 0.2 : 0.1
border.color: "#000000"
width: parent.width
height: 1
anchors.top: parent.top
}
Rectangle {
opacity: control.enabled ? 0.2 : 0.1
border.color: "#000000"
width: parent.width
height: 1
anchors.bottom: parent.bottom
}
}
delegate: Text {
text: qsTr("Item %1").arg(modelData + 1)
font: control.font
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
opacity: 1.0 - Math.abs(Tumbler.displacement) / (control.visibleItemCount / 2)
}
Rectangle {
anchors.horizontalCenter: control.horizontalCenter
y: control.height * 0.4
width: 40
height: 1
color: "#21be2b"
}
Rectangle {
anchors.horizontalCenter: control.horizontalCenter
y: control.height * 0.6
width: 40
height: 1
color: "#21be2b"
}
}
结果展示: