当前位置: 首页 > article >正文

QML旋转选择器组件Tumbler

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

结果展示:
在这里插入图片描述


http://www.kler.cn/a/371144.html

相关文章:

  • Jvm中的堆和栈
  • 大数据之VIP(Virtual IP,虚拟IP)负载均衡
  • MPL助力固态前驱体光刻胶,图案化金属氧化物半导体更精密
  • Vxe UI vue vxe-table 表格中使用下拉表格,单元格渲染下拉表格
  • PyQt入门指南三十四 QMenu菜单组件
  • 云智慧完成华为原生鸿蒙系统的适配, 透视宝 APM 为用户体验保驾护航
  • 第十一章 Shiro会话管理和加密
  • 《Web性能权威指南》-WebRTC-读书笔记
  • 【GL08】STM32--ADC/DAC
  • spring-boot(入门)
  • 深入探索:深度学习在时间序列预测中的强大应用与实现
  • 编程解决有趣的智力题
  • 17、电话号码的字母组合-cangjie
  • 中阳智能投资系统:量化科技引领未来投资之路
  • gbase8s之spring框架用druid中间件报语法错误
  • Linux安装es和kibana
  • git下载和配置
  • 探索Python与Excel的无缝对接:xlwings库的神秘面纱
  • GPT-Sovits-2-微调模型
  • 内网穿透之网络层ICMP隧道
  • CSS 修改图片颜色
  • 2024年10月HarmonyOS应用开发者基础认证全新题库
  • Objective-C 音频爬虫:实时接收数据的 didReceiveData_ 方法
  • 利用 Direct3D 绘制几何体—9.流水线状态对象
  • 为什么使用Node.js爬虫更优
  • DevOps赋能:优化业务价值流的实战策略与路径(上)