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

结果展示:

相关推荐
机器视觉知识推荐、就业指导8 小时前
QML 批量创建模块 【Repeater】 组件详解
前端·c++·qml
m0_555762902 天前
qml 基本元素
qt·qml
钱彬 (Qian Bin)3 天前
QT Quick(C++)跨平台应用程序项目实战教程 5 — 界面设计
c++·qt·教程·音乐播放器·qml·qt quick
__ocean14 天前
qml中ComboBox组件onCurrentIndexChanged与onActivated的使用
qt·qml
钱彬 (Qian Bin)14 天前
QT Quick(C++)跨平台应用程序项目实战教程 3 — 项目基本设置(窗体尺寸、中文标题、窗体图标、可执行程序图标)
c++·人工智能·音乐播放器·qml·界面设计·qt quick
梦起丶22 天前
「 DelegateUI 」Ant-d 风格的 Qt Qml UI 套件
qt·ui·qml·ant-d·ui-kit
小灰灰搞电子2 个月前
QML 快捷键与Shortcut的使用
qt·qml
小灰灰搞电子2 个月前
QML使用ChartView绘制折线图
qt·qml
码农客栈2 个月前
qml Page详解
qml
Ricardo于3 个月前
★3.3 事件处理
qml