QML旋转选择器组件Tumbler

1. 介绍

Tumbler是一个用于创建旋转选择器的组件。它提供了一种直观的方式来让用户从一组选项中进行选择,类似于转盘式数字密码锁。网上找的类似网图如下:

在QML里,这种组件一共有两个版本,分别在QtQuick.Extras 1.4(旧)和QtQuick.Controls 2.15(新)里。

2.QtQuick.Extras 1.4版本

Tumbler控件需要与一个或多个TumblerColumn项一起使用,它们定义了每个列的内容。

TumblerColumn的model属性保存本列的数据模型。

也可以使用带有角色的模型:

cpp 复制代码
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版本

cpp 复制代码
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:

cpp 复制代码
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"
     }
 }

结果展示:

相关推荐
机器视觉知识推荐、就业指导2 小时前
开源QML控件:进度条滑动控件(含源码下载链接)
前端·qt·开源·qml
byxdaz3 天前
QML TabBar 和 TabButton 组件
qml
byxdaz5 天前
QML中日期处理类
qml
byxdaz5 天前
QML中的JSON 处理
qml
byxdaz6 天前
QML动画--ParallelAnimation和SequentialAnimation
qml
byxdaz6 天前
QML Rectangle 组件
qml
火山上的企鹅11 天前
异形遮罩之QML中的 `OpacityMask` 实战
开发语言·qml·opacitymask
byxdaz12 天前
QML ListView 与 C++ 模型交互
qml
byxdaz16 天前
QML Item 元素
qml
苏克贝塔16 天前
QML面试笔记--UI设计篇05容器控件
qml