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"
     }
 }

结果展示:

相关推荐
咩咩大主教11 天前
VSCode导入QSS文件
css·c++·vscode·qt·qml·quick·qss
for(::)12 天前
QML列表视图 ListView的使用
c++·qt·qml·1024程序员节
ly_zszcyx21 天前
Qml 分组动画(二) 动画嵌套(自学笔记)
c++·qt·qml
爱搞事的程小猿2 个月前
4.qml单例模式
单例模式·js·qml
梦起丶2 个月前
Qml 实现星级评分组件 已发布
qt·ui·控件·qml
梦起丶2 个月前
Qml 实现水波进度动画条
qt·ui·控件·qml
梦起丶2 个月前
Qml 实现仿前端的 Notification (悬浮出现页面上的通知消息)
qt·控件·qml
梦起丶2 个月前
Qt 中实现异步散列器
c++·qt·hash·qml
梦起丶2 个月前
Qml 实现瀑布流布局
qt·布局·qml