QML旋转选择器组件Tumbler

1. 介绍

Tumbler是一个用于创建旋转选择器的组件。它提供了一种直观的方式来让用户从一组选项中进行选择,类似于转盘式数字密码锁。网上找的类似网图如下:
在QML里,这种组件一共有两个版本,分别在QtQuick.Extras 1.4(旧)和QtQuick.Controls 2.15(新)里。

2.QtQuick.Extras 1.4版本

Tumbler控件需要与一个或多个TumblerColumn项一起使用,它们定义了每个列的内容。
TumblerColumn的model属性保存本列的数据模型。
在这里插入图片描述
也可以使用带有角色的模型:

ListModel {id: listModelListElement {foo: "A1"bar: "B1"baz: "C1"}ListElement {foo: "A2"bar: "B2"baz: "C2"}ListElement {foo: "A3"bar: "B3"baz: "C3"}}Tumbler {anchors.centerIn: parentTumblerColumn {model: listModelrole: "foo"}TumblerColumn {model: listModelrole: "bar"}TumblerColumn {model: listModelrole: "baz"}}

在这里插入图片描述
我们还可以自定义它的样式,定义整个Tumbler外观可以使用TumblerStyle,定义单列外观的就使用TumblerColumn的delegate和highlight属性。这版有很多bug,就不演示了。

3.QtQuick.Controls 2.15版本

Component {id: cusDelgateText {text: modelDataopacity: 0.8horizontalAlignment: Text.AlignHCenterverticalAlignment: Text.AlignVCenterfont.pixelSize: 16}}Row {id: row_layanchors.fill: parentTumbler {id: hoursTumblermodel: 12delegate: cusDelgatevisibleItemCount: 3     // 可见项数wrap: false             // 是否环绕(循环展示内容)}Tumbler {id: minutesTumblermodel: 60delegate: cusDelgate}Tumbler {id: amPmTumblermodel: ["AM", "PM"]delegate: cusDelgate}}

结果展示:
在这里插入图片描述
自定义Tumbler:

Tumbler {id: controlmodel: 15background: Item {Rectangle {opacity: control.enabled ? 0.2 : 0.1border.color: "#000000"width: parent.widthheight: 1anchors.top: parent.top}Rectangle {opacity: control.enabled ? 0.2 : 0.1border.color: "#000000"width: parent.widthheight: 1anchors.bottom: parent.bottom}}delegate: Text {text: qsTr("Item %1").arg(modelData + 1)font: control.fonthorizontalAlignment: Text.AlignHCenterverticalAlignment: Text.AlignVCenteropacity: 1.0 - Math.abs(Tumbler.displacement) / (control.visibleItemCount / 2)}Rectangle {anchors.horizontalCenter: control.horizontalCentery: control.height * 0.4width: 40height: 1color: "#21be2b"}Rectangle {anchors.horizontalCenter: control.horizontalCentery: control.height * 0.6width: 40height: 1color: "#21be2b"}}

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/884459.shtml

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

相关文章

车载无人机用来做什么?车载无人机技术详解

车载无人机是将车和无人机组合到一起的产品,它有效地结合了无人机的灵活性和指挥车的远距离移动性,大大扩展了无人机的使用范围。以下是对车载无人机技术的详细解析: 一、车载无人机的应用 1. 应急现场指挥: 车载无人机可迅速抵…

HarmonyOS NEXT 应用开发实战(九、知乎日报项目详情页实现详细介绍)

在本篇博文中,我们将探讨如何使用 HarmonyOS Next 框架开发一个知乎日报的详情页,逐步介绍所用到的组件及代码实现。知乎日报是个小巧完整的小项目,这是一个循序渐进的过程,适合初学者和有一定开发经验的工程师参考。 1. 项目背景…

C++线程异步

std::future std::future作为异步结果的传输通道,可以很方便地获取线程函数的返回值。 std::future_status Ready (std::future_status::ready): 当与 std::future 对象关联的异步操作已经完成时,std::future 处于 ready 状态。在这个状态下,…

阿里云k8s-master部署CNI网络插件遇到的问题

问题 按照网络上的部署方法 cd /opt/k8s # 下载 calico-kube-controllers配置文件,可能会网络超时 curl https://docs.projectcalico.org/manifests/calico.yaml -O kubectl apply -f calico.yaml 试了很多次都不行,k8s-master都是Not ready的状态 ca…

从壹开始解读Yolov11【源码研读系列】——Data.Base.py.BaseDataset:可灵活改写的数据集加载处理基类

目录 一、base.BaseDataset 1.__init__类初始化 2.get_img_files根据地址获得图片详细地址 3.get_labels(自定义)获取标签数据 4. update_labels指定类别和单分类设定 5.set_rectangle开启批量矩阵训练 6.cache_images加载图片进程可视化 7.load_image内…

计算机毕业设计Hadoop+大模型地震预测系统 地震数据分析可视化 地震爬虫 大数据毕业设计 Spark 机器学习 深度学习 Flink 大数据

温馨提示:文末有 CSDN 平台官方提供的学长联系方式的名片! 温馨提示:文末有 CSDN 平台官方提供的学长联系方式的名片! 温馨提示:文末有 CSDN 平台官方提供的学长联系方式的名片! 作者简介:Java领…

数据结构和算法(六):贪心算法、分治算法、回溯算法、动态规划、拓扑排序

从广义上来讲:数据结构就是一组数据的存储结构 , 算法就是操作数据的方法 数据结构是为算法服务的,算法是要作用在特定的数据结构上的。 10个最常用的数据结构:数组、链表、栈、队列、散列表、二叉树、堆、跳表、图、Trie树 10个最…

顺序表和链表(一)

目录 线性表 一、顺序表 <1>顺序表 &#xff08;1&#xff09;静态顺序表 &#xff08;2&#xff09;动态顺序表-按需申请 <2>链表 &#xff08;1&#xff09;单链表 &#xff08;2&#xff09;双链表 主程序&#xff08;test.c&#xff09; 头文件&#…

# Ubuntu 达人九步养成记(1)

Ubuntu 达人九步养成记&#xff08;1&#xff09; 目录&#xff1a; 一、ubuntu基本安装 二、设置语言环境 三、设置服务器镜像源 四、在启动栏添加终端图标 五、使用apt更新和升级系统软件 六、使用apt安装软件 七、使用apt删除软件以及apt-get 八、deb格式及谷歌浏览…

QT——TCP网络调试助手

目录 一.项目展示 ​编辑 二.开发流程 三.QTcpServer、QTcpSocket、QUdpSocket类的学习 1.QTcpServer服务端 2.QTcpSocket客户端 3.Udp通信 四.网络调试助手 1.首先我们实现当用户选择不同协议类型时不同的UI组件如何切换 2.实现打开/关闭按键图片的切换 方式一&…

导航栏渐变色iOS

- (void)viewDidLoad {[super viewDidLoad];// 设置导航栏属性self.navigationBar.translucent NO;[self.navigationBar setTitleTextAttributes:{NSForegroundColorAttributeName : [UIColor whiteColor], NSFontAttributeName:[UIFont boldSystemFontOfSize:28]}];// 修复iO…

《Web性能权威指南》-浏览器API与协议-读书笔记

本文是《Web性能权威指南》第四部分——浏览器API与协议的读书笔记。 第一部分——网络技术概览&#xff0c;请参考网络技术概览&#xff1b; 第二部分——无线网络性能&#xff0c;请参考无线网络性能&#xff1b; 第三部分——HTTP&#xff0c;请参考HTTP。 浏览器网络概述 …

使用TypeORM进行数据库操作

&#x1f493; 博客主页&#xff1a;瑕疵的CSDN主页 &#x1f4dd; Gitee主页&#xff1a;瑕疵的gitee主页 ⏩ 文章专栏&#xff1a;《热点资讯》 使用TypeORM进行数据库操作 引言 TypeORM 简介 安装 TypeORM 配置 TypeORM 定义实体 连接数据库 运行项目 高级功能 事务管理 关…

ESP-HaloPanel:用 ESP32-C2 打造超低成本智能家居面板

项目简介 在生活品质日益提升的今天&#xff0c;智能家居系统已经走进了千家万户&#xff0c;并逐渐成为现代生活的一部份。与此同时&#xff0c;一款设计精致、体积轻盈、操作简便的全屋智能家居控制面板&#xff0c;已经成为众多家庭的新宠。这种高效、直观的智能化的解决方…

Hadoop生态圈框架部署(四)- Hadoop完全分布式部署

文章目录 前言一、Hadoop完全分布式部署&#xff08;手动部署&#xff09;1. 下载hadoop2. 上传安装包2. 解压hadoop安装包3. 配置hadoop配置文件3.1 虚拟机hadoop1修改hadoop配置文件3.1.1 修改 hadoop-env.sh 配置文件3.3.2 修改 core-site.xml 配置文件3.3.3 修改 hdfs-site…

数据建模圣经|数据模型资源手册卷3,数据建模最佳实践

简介 本书采用了类设计模式的方式对数据模型进行高度抽象总结&#xff0c;展现了常见的数据模型构建模型等模型的作用、层次、分类、地位、沟通方式&#xff0c;和业务规则。使用一个强大的数据模型模式的数据建模&#xff0c;评估特定与广义模型的优缺点&#xff0c;有助于你改…

【力扣】Go语言回溯算法详细实现与方法论提炼

文章目录 一、引言二、回溯算法的核心概念三、组合问题1. LeetCode 77. 组合2. LeetCode 216. 组合总和III3. LeetCode 17. 电话号码的字母组合4. LeetCode 39. 组合总和5. LeetCode 40. 组合总和 II小结 四、分割问题6. LeetCode 131. 分割回文串7. LeetCode 93. 复原IP地址小…

#渗透测试#SRC漏洞挖掘# 信息收集-Shodan进阶之Mongodb未授权访问

免责声明 本教程仅为合法的教学目的而准备&#xff0c;严禁用于任何形式的违法犯罪活动及其他商业行为&#xff0c;在使用本教程前&#xff0c;您应确保该行为符合当地的法律法规&#xff0c;继续阅读即表示您需自行承担所有操作的后果&#xff0c;如有异议&#xff0c;请立即停…

Golang--流程控制

1、分支结构 1.1 if分支 单分支 语法&#xff1a;if 条件表达式 { 逻辑代码 } 当条件表达式为true时&#xff0c;就会执行代码块的代码。条件表达式左右的()可以不写&#xff0c;也建议不写 if和表达式中间&#xff0c;一定要有空格在Golang中&#xff0c;{}是必须有的,就算你…

【补补漏洞吧 | 02】等保测评ZooKeeperElasticsearch未授权访问漏洞补漏方法

一、项目背景 客户新系统上线&#xff0c;因为行业网络安全要求&#xff0c;需要做等保测评&#xff0c; 通过第三方漏扫工具扫描系统&#xff0c;漏扫报告显示ZooKeeper和 Elasticsearch 服务各拥有一个漏洞&#xff0c;具体结果如下&#xff1a; 1、ZooKeeper 未授权访问【…