034-第三代软件开发-自定义Slider(一)

2023-10-29 06:20
文章标签 自定义 软件开发 slider 034 第三代

本文主要是介绍034-第三代软件开发-自定义Slider(一)，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

头图

第三代软件开发-自定义Slider(一)

文章目录

  • 第三代软件开发-自定义Slider(一)
    • 项目介绍
    • 自定义Slider(一)
    • 总结一下

关键字： Qt、 Qml、 Slider、 position、 关键字5

项目介绍

欢迎来到我们的 QML & C++ 项目！这个项目结合了 QML（Qt Meta-Object Language）和 C++ 的强大功能，旨在开发出色的用户界面和高性能的后端逻辑。

在项目中，我们利用 QML 的声明式语法和可视化设计能力创建出现代化的用户界面。通过直观的编码和可重用的组件，我们能够迅速开发出丰富多样的界面效果和动画效果。同时，我们利用 QML 强大的集成能力，轻松将 C++ 的底层逻辑和数据模型集成到前端界面中。

在后端方面，我们使用 C++ 编写高性能的算法、数据处理和计算逻辑。C++ 是一种强大的编程语言，能够提供卓越的性能和可扩展性。我们的团队致力于优化代码，减少资源消耗，以确保我们的项目在各种平台和设备上都能够高效运行。

无论您是对 QML 和 C++ 开发感兴趣，还是需要我们为您构建复杂的用户界面和后端逻辑，我们都随时准备为您提供支持。请随时联系我们，让我们一同打造现代化、高性能的 QML & C++ 项目！

重要说明☝

☀该专栏在第三代软开发更新完将涨价

自定义Slider(一)

这部分代码是由我们的小伙伴开发，这里做一下分享，按照我的习惯我肯定是不会自己写一个的，我会去该Qt自带Slider 得样式，不过看代码，我们的小伙伴是自己实现了一个。后面我在写简单的视频播放器的时候，会有自定义Slider(二出现)。

小伙伴博客ID：https://blog.csdn.net/weixin_44641897?type=blog

​ 

import QtQuick 2.0
Item {id: root// 游标所在位置property int position: 5// 最多有多少刻度property int maxSchedule: 11// 显示字符串位置 -1左 0无 1右property int textLocation: 0// 字符串所占位置宽度  为 小于等于 0值 表示没有property int textWidth: 150// 字符穿内容 长度应该为刻度值+1property var textData: []// 刻度间隔property real spac: 4// 刻度条宽度(不含间隔）property int barWidth: 20// 刻度条宽度property int barWidthContain: barWidth + spacwidth: textLocation == 0 ? processBar.width+40 : processBar.width + textWidth +40height: 60Component.onCompleted: {//        console.log(textData.length)}// 背景图Image {id: backSlidersource: textLocation == -1 ? "qrc:/MainWindow/T_Resource/T_Image/MainWindow/Thyroid/Slider/bg_time.png" : "qrc:/MainWindow/T_Resource/T_Image/MainWindow/Thyroid/Slider/bg.png"anchors.centerIn: parentwidth: textLocation == 0 ? processBar.width+40 : processBar.width + textWidth +40//        anchors.margins: 20// 游标刻度显示Text {id: sliderText// 防止提供刻度值不够text: textData.length > position ? textData[position] : "null"width: textWidthheight: 20visible: textLocation == 0 || textWidth == 0 ? false : truecolor: "#D8D8D8"x: textLocation == -1 ? 20 : textLocation == 1 ? backSlider.width - textWidth  : 0y: backSlider.height / 2 - height / 2}// 进度条Image {id: processBarwidth: 8 + maxSchedule * barWidthContainheight: 10x: textLocation == 1 ? 20 : textLocation == -1 ? backSlider.width - processBar.width-20  : 20y: backSlider.height / 2 - height / 2source: "qrc:/MainWindow/T_Resource/T_Image/MainWindow/Thyroid/Slider/slider_bar.png"// 刻度ListView {id:listspacing:spacorientation: ListView.Horizontalwidth: processBar.widthheight: 10x: spacmodel: maxScheduleinteractive: falsedelegate: Rectangle{width: barWidthheight: 4y: processBar.height / 2 - height / 2color: index < position ? "#00B1FF" : "#53555C"}//点击进度条时实现快速快进快退MouseArea{anchors.fill: parentonClicked: {position = (mouseX+barWidthContain/2)/barWidthContainfor(var i=1;i<maxSchedule;i++){if(i < position){list.currentIndex = i   //点击选中哪一项list.currentItem.color = "#00B1FF"}else{list.currentIndex = i  //点击选中哪一项list.currentItem.color = "#53555C"}}}}// 游标Image {id: sliderRectsource: "qrc:/MainWindow/T_Resource/T_Image/MainWindow/Thyroid/Slider/pointer.png"x: position==0 ? 0-sliderRect.width/2 : position*barWidthContain - spac -sliderRect.width/2y: list.height / 2 - height / 2 +2MouseArea{anchors.fill: parentonMouseXChanged: {if(mouseX>barWidth+sliderRect.width/2){if(position < maxSchedule){list.currentIndex = position   //点击选中哪一项list.currentItem.color = "#00B1FF"position++}}if(mouseX<0){if(position > 1){list.currentIndex = position-1   //点击选中哪一项list.currentItem.color = "#53555C"position--}}}}}}}}
}

使用法子：

Turing_Slider{id:slider_voltageanchors.left: parent.leftanchors.bottom: parent.bottomvisible: falseposition: UserProfile.voltageRangemaxSchedule: 13textLocation: 1textWidth: 80textData: ["","20uV","50uV","100uV","200uV","500uV","1KuV","2KuV","5KuV","1WuV","2WuV","5WuV","10WuV","自适应"]onPositionChanged: {UserProfile.voltageRange = position;switch (position){case 1:set_voltageRange(20);playSound.play();breakcase 2:set_voltageRange(50);playSound.play();breakcase 3:set_voltageRange(100);playSound.play();breakcase 4:set_voltageRange(200);playSound.play();breakcase 5:set_voltageRange(500);playSound.play();breakcase 6:set_voltageRange(1000);playSound.play();breakcase 7:set_voltageRange(2000);playSound.play();breakcase 8:set_voltageRange(5000);playSound.play();breakcase 9:set_voltageRange(10000);playSound.play();breakcase 10:set_voltageRange(20000);playSound.play();breakcase 11:set_voltageRange(50000);playSound.play();breakcase 12:set_voltageRange(100000);playSound.play();breakcase 13:set_voltageRange(0);playSound.play();break}}

总结一下

这个Slider意义在于提供一个思路，而复用性应该没有太多，包括我们项目中，也没法复用，可以说是专门为了某一个功能定制的。参考参考

博客签名2021

这篇关于034-第三代软件开发-自定义Slider(一)的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/298811。

相关文章

SpringBoot 自定义消息转换器使用详解

SpringBoot 自定义消息转换器使用详解

《SpringBoot自定义消息转换器使用详解》本文详细介绍了SpringBoot消息转换器的知识,并通过案例操作演示了如何进行自定义消息转换器的定制开发和使用,感兴趣的朋友一起看看吧... 目录一、前言二、SpringBoot 内容协商介绍2.1 什么是内容协商2.2 内容协商机制深入理解2.2.1 内容
阅读更多...
【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【课程链接】 AntV G6：深入图形与图形分组、自定义节点、节点动画（下）_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中，应该怎样去计算和绘制图形，如何给一个图形制作不间断的动画，以及在鼠标事件之后产生动画。（有点难，需要好好理解） <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06
阅读更多...
自定义类型：结构体(续)

自定义类型：结构体(续)

目录 一. 结构体的内存对齐 1.1 为什么存在内存对齐？ 1.2 修改默认对齐数 二. 结构体传参 三. 结构体实现位段 一. 结构体的内存对齐 在前面的文章里我们已经讲过一部分的内存对齐的知识，并举出了两个例子，我们再举出两个例子继续说明： struct S3{double a;int b;char c;};int mian(){printf("%zd\n",s
阅读更多...
Spring 源码解读：自定义实现Bean定义的注册与解析

Spring 源码解读：自定义实现Bean定义的注册与解析

引言 在Spring框架中，Bean的注册与解析是整个依赖注入流程的核心步骤。通过Bean定义，Spring容器知道如何创建、配置和管理每个Bean实例。本篇文章将通过实现一个简化版的Bean定义注册与解析机制，帮助你理解Spring框架背后的设计逻辑。我们还将对比Spring中的BeanDefinition和BeanDefinitionRegistry，以全面掌握Bean注册和解析的核心原理。
阅读更多...
Oracle type （自定义类型的使用）

Oracle type （自定义类型的使用）

oracle - type   type定义： oracle中自定义数据类型 oracle中有基本的数据类型，如number，varchar2，date，numeric，float....但有时候我们需要特殊的格式， 如将name定义为（firstname,lastname）的形式，我们想把这个作为一个表的一列看待，这时候就要我们自己定义一个数据类型 格式 ：create or repla
阅读更多...
HTML5自定义属性对象Dataset

HTML5自定义属性对象Dataset

原文转自HTML5自定义属性对象Dataset简介 一、html5 自定义属性介绍 之前翻译的“你必须知道的28个HTML5特征、窍门和技术”一文中对于HTML5中自定义合法属性data-已经做过些介绍，就是在HTML5中我们可以使用data-前缀设置我们需要的自定义属性，来进行一些数据的存放，例如我们要在一个文字按钮上存放相对应的id： <a href="javascript:" d
阅读更多...
一步一步将PlantUML类图导出为自定义格式的XMI文件

一步一步将PlantUML类图导出为自定义格式的XMI文件

一步一步将PlantUML类图导出为自定义格式的XMI文件 说明： 首次发表日期：2024-09-08PlantUML官网： https://plantuml.com/zh/PlantUML命令行文档： https://plantuml.com/zh/command-line#6a26f548831e6a8cPlantUML XMI文档: https://plantuml.com/zh/xmi
阅读更多...
argodb自定义函数读取hdfs文件的注意点，避免FileSystem已关闭异常

argodb自定义函数读取hdfs文件的注意点，避免FileSystem已关闭异常

一、问题描述 一位同学反馈，他写的argo存过中调用了一个自定义函数，函数会加载hdfs上的一个文件，但有些节点会报FileSystem closed异常，同时有时任务会成功，有时会失败。 二、问题分析 argodb的计算引擎是基于spark的定制化引擎，对于自定义函数的调用跟hive on spark的是一致的。udf要通过反射生成实例，然后迭代调用evaluate。通过代码分析，udf在
阅读更多...
鸿蒙开发中实现自定义弹窗 (CustomDialog)

鸿蒙开发中实现自定义弹窗 (CustomDialog)

效果图 #思路 创建带有 @CustomDialog 修饰的组件 ，并且在组件内部定义controller: CustomDialogController 实例化CustomDialogController，加载组件，open()-> 打开对话框 ， close() -> 关闭对话框 #定义弹窗 (CustomDialog)是什么？ CustomDialog是自定义弹窗，可用于广告、中
阅读更多...
mybatis框架基础以及自定义插件开发

mybatis框架基础以及自定义插件开发

文章目录 框架概览框架预览MyBatis框架的核心组件MyBatis框架的工作原理MyBatis框架的配置MyBatis框架的最佳实践 自定义插件开发1. 添加依赖2. 创建插件类3. 配置插件4. 启动类中注册插件5. 测试插件 参考文献 框架概览 MyBatis是一个优秀的持久层框架，它支持自定义SQL、存储过程以及高级映射，为开发者提供了极大的灵活性和便利性。以下是关于M
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2