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,一经查实,立即删除!

相关文章

【Python】-蚂蚁森林问答题-查看当天的答案

http://www.xuexili.com/mayizhuangyuan/jinridaan.htmlimport requests from lxml import etree import time import re url ‘https://www.app178.com/dujia/248082.html’ resp requests.get(url) resp.encoding ‘utf-8’ html etree.HTML(resp.text.encode(‘gbk’).…

20.网工入门篇--------介绍下IPV6基础知识

地址表示形式: 完整格式:IPv6 地址总长度为 128 位,通常分为 8 组,每组为 4 个十六进制数的形式,每组十六进制数间用冒号分隔。例如:2001:0db8:85a3:0000:0000:8a2e:0370:7334。压缩格式:为了书…

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

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

【ChatGPT】让ChatGPT根据固定模板生成报告或文档

让ChatGPT根据固定模板生成报告或文档 在撰写报告或文档时,使用固定模板可以确保内容的统一性和结构的清晰性。利用ChatGPT生成符合特定模板的报告,不仅提高了工作效率,还能确保信息的准确传达。本文将探讨如何设计固定模板并引导ChatGPT生成…

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内…

从0学习React(10)

示例代码&#xff1a; const columns: ProColumns<API.BasicInfoItem>[] [{title: 设备编码,dataIndex: deviceCode,ellipsis: true,width: 40,},{title: 设备名称,dataIndex: deviceName,ellipsis: true,width: 50,},{title: 产线-工序,dataIndex: deviceClassifyName…

js操作数组的方法 / js操作字符串的方法

操纵数组的方法 常见的有10种 push() -在数组末尾添加一个或多个元素&#xff0c;并返回新的长度。 pop() -删除数组的最后一个元素&#xff0c;并返回那个元素。 shift() -删除数组的第一个元素&#xff0c;并返回那个元素。 unshift() -在数组的开始添加一个或多个元素&…

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

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

Redis到底支不支持事务?半事务

redis是支持事务的&#xff0c;它与传统的关系数据库中的事务有所不同。 1.原子性&#xff1a; redis事务保证的是队列中的命令作为一个整体要么全部执行&#xff0c;要么全部不执行。但是&#xff0c;如果事务中的某个命令因为执行错误而失败&#xff0c;redis会继续执行事务…

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

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

浅谈二进制位移

一、基本形式 二进制位移操作是计算机编程中常用的一种位操作&#xff0c;它可以用来实现乘除操作、数据压缩和扩展等。位移操作包括左移和右移两种基本形式&#xff1a; 1、左移&#xff08;Left Shift&#xff09;&#xff1a; 符号&#xff1a;<<功能&#xff1a;将…

顺序表和链表(一)

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

pgsql数据量大之后可能遇到的问题

当 PostgreSQL 数据量增大时&#xff0c;可能会遇到以下问题&#xff1a; 查询性能下降&#xff1a;随着数据量的增加&#xff0c;查询可能会变得缓慢&#xff0c;尤其是在没有适当索引的情况下。大量的数据意味着更多的行需要被扫描和过滤&#xff0c;这会显著增加查询执行时间…

样本不均衡与异常点检测处理|SMOTE|LOF|IForest

在机器学习中&#xff0c;数据样本不均衡和异常值检测是数据科学家和机器学习工程师经常面临的挑战。这些问题如果不加以处理&#xff0c;会严重影响模型的性能和准确性。本文将概述这些问题&#xff0c;并提出相应的解决方案。 样本不均衡概述 在分类任务中&#xff0c;样本…

aws boto3 下载文件

起因&#xff1a;有下载 aws s3 需求&#xff0c;但只有web 登录账号&#xff0c;有 id 用户名 密码&#xff0c;没有 boto3 的 key ID 经过分析&#xff0c;发现网页版有个地址会返回临时 keyID&#xff0c;playwright 模拟登录&#xff0c;用 page.on 监测返回数据&#xff…

# 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.实现打开/关闭按键图片的切换 方式一&…