QML旋转选择器组件Tumbler

news2024/11/5 12:42:59

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.coloradmin.cn/o/2231583.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

思科路由器静态路由配置

转载请注明出处 该实验为静态路由配置实验,仅供参考 选择三台2811路由器 关闭电源-安装模块-开启电源(以R1为例,其他两台也是一样操作!) 连线。注意R1与R3之间、R3与R2之间用DCE串口线(如下图)…

闪存学习_2:Flash-Aware Computing from Jihong Kim

闪存学习_2:Flash-Aware Computing from Jihong Kim【1】 一、三个闪存可靠性问题二、内存的分类三、NAND 闪存和 NOR 闪存四、HDD和SSD比较Reference 一、三个闪存可靠性问题 耐性(即寿命):最多能经受编程和擦除的次数。数据保留…

双指针问题解法集(一)

1.指针对撞问题(利用有序数组的单调性衍生) 1.1LCR 179. 查找总价格为目标值的两个商品 - 力扣(LeetCode)​​​​​​ 1.1.1题目解析 有序数组,找到和为price的两个元素,只需要一个解即可。 1.1.2算法…

深度学习(十):伦理与社会影响的深度剖析(10/10)

深度学习:伦理与社会影响的深度剖析 一、深度学习的伦理挑战 (一)数据隐私之忧 深度学习模型的训练往往需要大量数据,而数据的收集过程可能会侵犯个人隐私。例如,据统计,面部识别技术在全球范围内每天会收…

网络模型——二层转发原理

网课地址:网络模型_二层转发原理(三)_哔哩哔哩_bilibili 一、路由交换 网络:用来信息通信,信息共享的平台。 网络节点(交换机,路由器,防火墙,AP)介质&#…

探索NetCat:网络流量监测与数据传输的利器

从简单的数据传输到复杂的网络调试,NetCat的灵活性和多功能性让人赞叹不已,在这篇文章中我将深入探讨NetCat的魅力,揭示它的基本功能、实用技巧以及在日常工作中的应用场景,发现如何用这一小工具提升的网络技能与效率。 目录 Net…

提高交换网络可靠性之链路聚合

转载请注明出处 该实验为链路聚合的配置实验。 1.改名,分别将交换机1和交换机2改名为S1,S2,然后查看S1,S2的STP信息。以交换机1为例👇。 2.交换机S1,S2上创建聚合端口,将端口加入聚合端口。以S…

Kubernetes:(三)Kubeadm搭建K8s 1.20集群

文章目录 一、Kubeadm安装流程二、实验1.环境准备2.所有节点安装kubeadm,kubelet和kubectl(除了Harbor节点)3.部署 Dashboard4.安装Harbor私有仓库 一、Kubeadm安装流程 集群名称IP地址安装软件master(2C/4G,cpu核心数…

使用MongoDB Atlas构建无服务器数据库

💓 博客主页:瑕疵的CSDN主页 📝 Gitee主页:瑕疵的gitee主页 ⏩ 文章专栏:《热点资讯》 使用MongoDB Atlas构建无服务器数据库 MongoDB Atlas 简介 注册账户 创建集群 配置网络 设置数据库用户 连接数据库 设计文档模式…

Windows 10 安装使用Docker踩过的坑和解决-31/10/2024

目录 环境版本 一、Docker Desktop双击启动没反应,open //./pipe/dockerDesktopLinuxEngine: The system cannot find the file specified. 二、Docker Desktop运行run命令时显示错误HTTP code 500 并且错误大意是服务器拒绝访问 三、Docker Engine stopped/启动…

parted 磁盘分区

目录 磁盘格式磁盘分区文件系统挂载使用扩展 - parted、fdisk、gdisk 区别 磁盘格式 parted /dev/vdcmklabel gpt # 设置磁盘格式为GPT p # 打印磁盘信息此时磁盘格式设置完成! 磁盘分区 开始分区: mkpart data_mysql # 分区名&…

论 ONLYOFFICE:开源办公套件的深度探索

公主请阅 引言第一部分:ONLYOFFICE 的历史背景1.1 开源软件的崛起1.2 ONLYOFFICE 的发展历程 第二部分:ONLYOFFICE 的核心功能2.1 文档处理2.2 电子表格2.3 演示文稿 第三部分:技术架构与兼容性3.1 技术架构3.2 兼容性 第四部分:部…

NVIDIA GeForce RTX 4090 Mobile 16G 性能分析

最近在看台式电脑,看到1W内居然能买到 i9-14900HX、RTX4090 16G,感觉不对劲,就离谱~ 4090的显卡什么时候出了16G的,而且还这这么便宜???? 目录 1、NVIDIA官网查查4090 2、对比RT…

【ARCGIS实验】地形特征线的提取

目录 一、提取不同位置的地形剖面线 二、将DEM转化为TIN 三、进行可视分析 四、进行山脊、山谷等特征线的提取 1、正负地形提取(用于校正) 2、山脊线提取 3、山谷线的提取 4、河网的提取 5、流域的分割 五、鞍部点的提取 1、背景 2、目的 3…

STM32使用串口下载程序

STM32使用串口下载程序 FluMcu软件下载地址 单片机在线编程网 STM32 MCU启动模式配置(Boot Configuration) 单片机复位后,SYSCLK的第4个上升沿,BOOT引脚上的值将锁存,用户可以通过设置BOOT0和BOOT1引脚的值,来选择复位后的启动…

MATLAB口罩检测

在当今疫情严峻的背景下,口罩成为了人们必备的防护用品。然而,市面上却出现了大量假冒伪劣口罩。为了帮助大家准确辨别真假口罩,小编将为大家介绍一种基于MATLAB的口罩检测方法。 1.口罩检测原理 通过图像处理技术,借助MATLAB强大…

网络层4——网络控制协议ICMP

目录 一、格式 二、种类 1、差错报文 (1)终点不可达 (2)时间超过 (3)参数问题 (4)改变路由(重定向) (5)差错报文数据字段 ​编…

RHCE——web

一,什么是www www是world wide web的缩写,也就是全球信息广播的意思。通常说的上网就是使用www来查询用户 所需要的信息。www可以结合文字、图形、影像以及声音等多媒体,并通过可以让鼠标单击超链接的方 式将信息以Internet传递到世界各处去…

GraphQL系列 - 第2讲 Spring集成GraphQL

目录 一、maven依赖二、Schema 定义三、代码集成3.1 创建模型类3.2 创建服务类3.3 创建控制器类 四、单元测试五、实际 HTTP 请求测试5.1 查询单个 Person5.2 查询所有 People5.3 添加 Person 六、其他6.1 开启graphiql6.2 开启schema查看端点 一、maven依赖 首先,…

如何将字母l劈开

如何将字母l从顶到底劈开? 一、分两步,将字母 l 劈开 个人认为,将字母l劈开,需要做两件事情,或者说可以通过如下两个步骤来实现: 【1】证明字母 l 是一个象形字母:即字母l它的本质&#xff0…