QML 自定义进度条组件开发

一、效果预览

二、介绍:

自定义的QML 屏幕亮度拖动进度条组件CusProgressBar 可跟鼠标移动 更改进度条样式

三、代码

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Controls.Material 2.12

/**
 *@author:Zwj
 *csdn:来份煎蛋吧
 *date:2023/12/16
 */
Rectangle {
    property int widthValue: 100
    width: widthValue
    height: 20
    radius: height / 2
    color: "lightgray"

    Rectangle {
        id: progressRect
        height: parent.height
        anchors.left: parent.left
        width: progressWidth
        radius: height / 2

        // 使用渐变颜色
        gradient: Gradient {
            id: progressGradient
            GradientStop { position: 0.0; color: "#8DE7F1" }
            GradientStop { position: 1.0; color: "#3FA6D9" }
        }

        Behavior on x {
            NumberAnimation { duration: 100 }
        }

    }

    Material.theme: Material.Dark

    MouseArea {
        id: mouseArea
        anchors.fill: parent

        onPressed: {
            if (mouse.button === Qt.LeftButton) {
                mouse.accepted = true
            }
        }

        onPositionChanged: {
            if (mouseArea.containsMouse && mouse.buttons === Qt.LeftButton) {
                var localMouse = mapToItem(progressRect, mouse.x, 0)
                if (localMouse.x >= 0 && localMouse.x <= parent.width) {
                    progressRect.width = localMouse.x
                    updateGradientStops(progressRect.width / parent.width)
                }
            }
        }
    }

    function updateGradientStops(progress) {
        progressGradient.stops[1].position = progress
    }

    property alias progressWidth: progressRect.width
}

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

C++实现简单的猜数字小游戏

猜数字 小游戏介绍&#xff1a;猜数字游戏是令游戏机随机产生一个100以内的正整数&#xff0c;用户输入一个数对其进行猜测&#xff0c;需要你编写程序自动对其与随机产生的被猜数进行比较&#xff0c;并提示大了&#xff0c;还是小了&#xff0c;相等表示猜到了。如果猜到&…

Appium —— 初识移动APP自动化测试框架Appium

说到移动APP自动化测试&#xff0c;代表性的测试框架非Appium莫属&#xff0c;从今天开始我们将从APP结构解析、Appium框架学习、安卓/iOS自动化测试实战、自动遍历回归测试、自动化测试平台及持续集成&#xff0c;多个维度一起由浅入深的学废Appium 今天我们先来初步认识Appi…

nodejs+vue+微信小程序+python+PHP运动项目推荐系统-计算机毕业设计推荐

运动项目推荐系统的整体架构确定以后&#xff0c;再来看运动项目推荐系统的主要功能模块图。整体的功能模块包括前台和后台&#xff0c;前台只要实现了注册用户功能&#xff0c;主要的页面&#xff0c;包括首页&#xff0c;体育资讯&#xff0c;体育项目&#xff0c;公告信息等…

基于ASF-YOLO融合空间特征和尺度特征的新型注意力尺度序列融合模型开发构建医学场景下细胞分割检测识别系统,以【BCC、DSB2018数据集为基准】

作者提出了一种新的基于注意尺度序列融合的YOLO框架&#xff08;ASF-YOLO&#xff09;&#xff0c;该框架结合了空间和尺度特征&#xff0c;实现了准确快速的细胞实例分割。基于YOLO分割框架&#xff0c;我们使用尺度序列特征融合&#xff08;SSFF&#xff09;模块来增强网络的…

pybind11:对比C++和Python解线性方程组的速度

前言 上篇博客介绍了如何在用pybind11实现ndarray和C数组的转换自由&#xff0c;pybind11&#xff1a;实现ndarray转C原生数组&#xff08;没看过的朋友可以去看一看&#xff09;下面我们以一个实际的算法例子演示一下如何使用这个技术&#xff0c;方便的实现 Python 调用 C 写…

基于linux系统的Tomcat+Mysql+Jdk环境搭建(三)centos7 安装Tomcat

Tomcat下载官网&#xff1a; Apache Tomcat - Which Version Do I Want? JDK下载官网&#xff1a; Java Downloads | Oracle 中国 如果不知道Tomcat的哪个版本应该对应哪个版本的JDK可以打开官网&#xff0c;点击Whitch Version 下滑&#xff0c;有低版本的&#xff0c;如…

Caused by: java.net.ConnectException: 拒绝连接: hadoop104/192.168.124.130:4142

项目场景&#xff1a;hadoop102接收消息&#xff0c;自定义拦截器&#xff0c;包含hello的发往hadoop103,不包含的发往hadoop104 报错原因&#xff1a; 原因1&#xff1a; 应该先开启接收方&#xff08;服务端&#xff09;&#xff0c;hadoop103,hadoop104,最后开启hadoop10…

编译android的C版本Lua库

本文讲述如何使用android studio 编译最新版本的Lua开源库),请自行下载。 我们提供的Demo,可以自行下载,工程结构如下: 本文编译的是Lua 5.4.6的版本,编译采用cmake的方式,我们支持编译静态库和动态库(我们在这一讲里:“Lua与***C在Android上的互调”是使用静态库)…

智能优化算法应用:基于JAYA算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于JAYA算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于JAYA算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.JAYA算法4.实验参数设定5.算法结果6.参考文献7.MA…

大数据与深度挖掘:如何在数字营销中与研究互动

数字营销最吸引人的部分之一是对数据的内在关注。 如果一种策略往往有积极的数据&#xff0c;那么它就更容易采用。同样&#xff0c;如果一种策略尚未得到证实&#xff0c;则很难获得支持进行测试。 数字营销人员建立数据信心的主要方式是通过研究。这些研究通常分为两类&…

Vue3快速上手笔记

Vue3快速上手 1.Vue3简介 2020年9月18日&#xff0c;Vue.js发布3.0版本&#xff0c;代号&#xff1a;One Piece&#xff08;海贼王&#xff09;耗时2年多、2600次提交、30个RFC、600次PR、99位贡献者github上的tags地址&#xff1a;https://github.com/vuejs/vue-next/release…

Docker单机部署OceanBase

文章目录 说明机器软硬件要求指导文档本次部署环境说明 OceanBase单机部署&#xff08;Docker&#xff09;一&#xff1a;拉取 OceanBase 数据库相关镜像二&#xff1a;启动 OceanBase 数据库实例完整启动日志展示 三&#xff1a;连接实例遇到报错&#xff1a;没有mysql客户端 …

selenium-grid4.3.0两种模式记录

selenium-grid4.3.0两种模式记录 本文运行&#xff0c;需要提前配置好Java11以及安装好Chrom、Firefox、Safari其中一个浏览器&#xff0c;如果是Chrom、Firefox需要下载对应版本的驱动&#xff0c;并给 webdriver 配置环境变量&#xff0c;Safari浏览器Mac系统会自带&#xf…

HiveSql语法优化二 :join算法

Hive拥有多种join算法&#xff0c;包括Common Join&#xff0c;Map Join&#xff0c;Bucket Map Join&#xff0c;Sort Merge Buckt Map Join等&#xff0c;下面对每种join算法做简要说明&#xff1a; Common Join Common Join是Hive中最稳定的join算法&#xff0c;其通过一个M…

案例067:基于微信小程序的小区租拼车管理信息系统

文末获取源码 开发语言&#xff1a;Java 框架&#xff1a;SSM JDK版本&#xff1a;JDK1.8 数据库&#xff1a;mysql 5.7 开发软件&#xff1a;eclipse/myeclipse/idea Maven包&#xff1a;Maven3.5.4 小程序框架&#xff1a;uniapp 小程序开发软件&#xff1a;HBuilder X 小程序…

【MySQL】(DDL) 数据库操作

创建&#xff1a; create database 数据库名称; //创建数据库 create database if not exists 数据库名 ; //创建数据库并添加判断 &#xff08;如果存在就不创建不存在就创建 &#xff09; create database 数据库名 default charset 字符集 ; //创建数据库并设置字符集 查…

计算机毕业设计 基于SpringBoot的二手物品交易管理系统的设计与实现 Java实战项目 附源码+文档+视频讲解

博主介绍&#xff1a;✌从事软件开发10年之余&#xff0c;专注于Java技术领域、Python人工智能及数据挖掘、小程序项目开发和Android项目开发等。CSDN、掘金、华为云、InfoQ、阿里云等平台优质作者✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精…

漏刻有时数据可视化Echarts组件开发(42)动态创建DIV容器

效果展示 引入外部文件 <script src"js/jquery.min.js"></script><script type"text/javascript" src"js/echarts.5.4.3.min.js"></script>CSS层叠样式表 实现一行3列效果&#xff0c;自动换行&#xff1b; .ecbox {he…

HNU-计算机网络-实验3-应用层和传输层协议分析(PacketTracer)

计算机网络 课程基础实验三应用层和传输层协议分析&#xff08;PacketTracer&#xff09; 计科210X 甘晴void 202108010XXX 【给助教的验收建议】 如果是助教&#xff0c;比起听同学读报告&#xff0c;更好的验收方式是随机抽取一个场景&#xff08;URL/HTTPS/FTP&#xff09…

Kafka-日志索引

Kafka的Log日志梳理 Topic下的消息是如何存储的&#xff1f; 在搭建Kafka服务时&#xff0c;在server.properties配置文件中通过log.dir属性指定了Kafka的日志存储目录。 实际上&#xff0c;Kafka的所有消息就全都存储在这个目录下。 这些核心数据文件中&#xff0c;.log结尾…