「Mac畅玩鸿蒙与硬件15」鸿蒙UI组件篇5 - Slider 和 Progress 组件

SliderProgress 是鸿蒙系统中的常用 UI 组件。Slider 控制数值输入,如音量调节;Progress 显示任务的完成状态,如下载进度。本文通过代码示例展示如何使用这些组件,并涵盖 进度条类型介绍节流优化状态同步定时器动态更新

在这里插入图片描述


关键词
  • Slider 组件
  • Progress 组件
  • 节流优化
  • 定时器更新
  • 进度条样式
  • 状态同步

一、Slider 组件基础
1.1 基本用法

以下示例展示 Slider 组件的基础用法,用户可拖动滑块实时控制数值,并显示当前值:

@Entry
@Component
struct SliderExample {@State value: number = 50; // 初始化滑块值build() {Column() {// 显示当前滑块的值Text(`当前值: ${this.value}`).fontSize(18)// 创建滑块组件Slider({value: this.value, // 当前滑块值min: 0,max: 100,}).blockColor(Color.Blue) // 设置滑块颜色.trackColor(Color.Gray) // 设置轨道颜色.onChange((newValue) => this.value = newValue); // 实时更新值// 增添趣味的小猫图片Image($r('app.media.cat')).width('46%').height('95%')}}
}

效果示例

在这里插入图片描述


1.2 模拟禁用的 Slider

滑块组件没有直接的 disabled 属性。通过逻辑控制模拟启用和禁用状态,并使用节流函数减少频繁更新:

@Entry
@Component
struct LockedSlider {@State value: number = 50;@State isDisabled: boolean = true; // 控制滑块状态private lastTime: number = 0; // 记录上次更新时间// 节流函数,避免频繁触发更新throttleChange(newValue: number) {const now = Date.now();if (now - this.lastTime > 100) {this.value = newValue;this.lastTime = now;}}build() {Column() {Image($r('app.media.cat')) // 显示图片.width(305).height(360).margin({ bottom: 30 });Column() {Text(`滑块状态: ${this.isDisabled ? '禁用' : '启用'}`).fontSize(18).margin({ bottom: 10 });Text(`当前值: ${this.value}`).fontSize(18).margin({ bottom: 10 });Slider({value: this.isDisabled ? 50 : this.value,min: 0,max: 100,}).blockColor(this.isDisabled ? Color.Gray : Color.Blue).trackColor(Color.Gray).onChange((newValue) => {if (!this.isDisabled) this.throttleChange(newValue);});Button(this.isDisabled ? '启用滑块' : '禁用滑块').margin({ bottom: 20 }).onClick(() => (this.isDisabled = !this.isDisabled));}}.width('100%').height('100%').padding(10);}
}

效果示例

在这里插入图片描述


二、Progress 组件基础
2.1 Progress 组件的类型

Progress 组件支持多种样式,适用于不同的应用场景:

  • ProgressType.Linear:线性进度条
  • ProgressType.Ring:环形进度条
  • ProgressType.Eclipse:椭圆进度条

2.2 环形进度条示例
@Entry
@Component
struct RingProgress {@State progress: number = 75;build() {Column() {Progress({value: this.progress,total: 100,type: ProgressType.Ring,}).color(Color.Red) // 设置进度颜色.backgroundColor(Color.Green); // 设置背景颜色}.alignItems(HorizontalAlign.Center).justifyContent(FlexAlign.Center).backgroundImage($r('app.media.cat')).margin(20).width('100%').height('100%')}
}

效果示例

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述


2.3 使用滑块控制线性进度条
@Entry
@Component
struct VolumeControl {@State volume: number = 50;build() {Column() {Text('音量控制').fontSize(24).fontWeight(FontWeight.Bold).margin({ bottom: 20 });Progress({value: this.volume,total: 100,type: ProgressType.Linear,}).color(Color.Blue).height(8);Slider({value: this.volume,min: 0,max: 100,}).blockColor(Color.Blue).trackColor(Color.Gray).margin({ top: 20 }).onChange((newValue) => this.volume = newValue);}.padding(20);}
}

效果示例

在这里插入图片描述


三、定时器动态更新进度

通过定时器实现平滑更新进度:

@Entry
@Component
struct SmoothProgress {@State progress: number = 0;build() {Column() {Image($r('app.media.cat')).width('46%').height('96%');Progress({value: this.progress,total: 100,type: ProgressType.Capsule,}).color(Color.Green).onAppear(() => this.startTimer());}}startTimer(): void {setInterval(() => {if (this.progress < 100) this.progress += 1;}, 100);}
}

小结

本篇介绍了鸿蒙系统中的 SliderProgress 组件的使用,包括:

  1. 滑块控制与禁用模拟:通过逻辑实现启用与禁用状态;
  2. 节流优化:使用节流函数避免频繁触发更新;
  3. 多种进度条样式:了解环形、线性、胶囊等进度条;
  4. 定时器动态更新:通过定时器平滑更新进度条。

下一篇预告

下一篇将介绍 List 和 Grid 组件,展示如何实现数据列表的动态加载与展示。


上一篇:「Mac畅玩鸿蒙与硬件14」鸿蒙UI组件篇4 - Toggle 和 Checkbox 组件
下一篇:「Mac畅玩鸿蒙与硬件16」鸿蒙UI组件篇6 - List 和 Grid 组件展示数据列表

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

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

相关文章

GitHub个人主页美化

效果展示 展示为静态效果&#xff0c;动态效果请查看我的GitHub页面 创建GitHub仓库 创建与GitHub用户名相同的仓库&#xff0c;当仓库名与用户名相同时&#xff0c;此仓库会被视作特殊仓库&#xff0c;其README.md&#xff08;自述文件&#xff09;会展示在GitHub个人主页…

Windows 命令提示符(cmd)中输入 mysql 并收到错误消息“MySQL不是内部或外部命令,也不是可运行的程序或批处理文件?

目录 背景: 过程&#xff1a; 1.找到MySQL安装的路径 2.编辑环境变量 3.打开cmd&#xff0c;输入mysql --version测试成功 总结: 背景: 很早之前安装了Mysql数据库&#xff0c;想查询一下当前安装的MySQL客户端的版本号&#xff0c;我在命令行界面输入mysql --verion命令回…

<项目代码>YOLOv8 夜间车辆识别<目标检测>

YOLOv8是一种单阶段&#xff08;one-stage&#xff09;检测算法&#xff0c;它将目标检测问题转化为一个回归问题&#xff0c;能够在一次前向传播过程中同时完成目标的分类和定位任务。相较于两阶段检测算法&#xff08;如Faster R-CNN&#xff09;&#xff0c;YOLOv8具有更高的…

太强了!Ollama + MaxKB零代码本地搭建个人知识库AI应用,数据安全,还可以有权限控制!!

零代码本地搭建AI应用 &#x1f4da; 借助开源的&#xff0c;大模型应用不再遥不可及 &#x1f680; 当提到“大模型”和“本地部署”&#xff0c;很多人可能第一反应是&#xff1a;“这是不是只有那些顶尖的技术大牛才能搞定&#xff1f;” 其实&#xff0c;随着开源工具的发…

Unreal5从入门到精通之如何在指定的显示器上运行UE程序

前言 我们有一个设备,是一个带双显示器的机柜,主显示器是一个小竖屏,可以触屏操作,大显示器是一个普通的横屏显示器。我们用这个机柜的原因就是可以摆脱鼠标和键盘,直接使用触屏操作,又可以在大屏观看,非常适合用于教学。 然后我们为这款机柜做了很多个VR项目,包括Uni…

Docker安装XXL-JOB分布式调度任务

一、持久化 1、下载 xxl-job 源码,找到持久化脚本 2、创建 xxl-job 数据库,将上述文件中的脚本在本库执行即可 create database xxl_job charset utf8mb4 collate utf8mb4_general_ci; 二、安装 1、下载 xxl-job 镜像 docker pull xuxueli/xxl-job-admin:2.4.1 2、创建…

【华为HCIP实战课程三十】中间到中间系统协议IS-IS路由渗透及TAG标识详解,网络工程师

一、路由泄露 1、默认情况Level 1不会学到Level2的明细路由&#xff0c;L2可以学到L1的明细路由 2、FIB数据转发&#xff0c;路由负载&#xff0c;通过随机数据中的五元组hash,hash值决定数据走哪条链路 R1设备ping和telnet通过抓包查看走的都是S1/0/0接口 抓包进行过滤;ip.a…

如何将MySQL彻底卸载干净

目录 背景&#xff1a; MySQL的卸载 步骤1&#xff1a;停止MySQL服务 步骤2&#xff1a;软件的卸载 步骤3&#xff1a;残余文件的清理 步骤4&#xff1a;清理注册表 步骤五:删除环境变量配置 总结&#xff1a; 背景&#xff1a; MySQL卸载不彻底往往会导致重新安装失败…

死锁(Dead Lock)

目录 一. 死锁出现的场景 1. 一个线程, 一个锁对象 2. 两个线程, 两个锁对象 3. N个线程, M个锁对象 二. 造成死锁的必要条件 1. 锁是互斥的 2. 锁是不可被抢占的 3.请求和保持 4. 循环等待 三. 死锁的解决方案 1. 预防死锁 2. 死锁产生后的解决 一. 死锁出现的场景…

【Android 系统中使用CallStack类来追踪获取和操作调用栈信息】

Android系统CallStack类的使用 定义使用方法使用场景注意事项应用举例 定义 在 Android 系统中&#xff0c;CallStack 类是一个用于获取和操作调用栈信息的工具类。这个类通常用于调试和日志记录&#xff0c;以帮助开发者了解函数调用的顺序和位置。以下是您提供的代码片段的解…

深度学习基础知识-残差网络ResNet

目录 一、ResNet 的核心思想&#xff1a;残差学习&#xff08;Residual Learning&#xff09; 二、ResNet 的基本原理 三、ResNet 网络结构 1. 残差块&#xff08;Residual Block&#xff09; ResNet 的跳跃连接类型 2. 网络结构图示 四、ResNet 的特点和优势 五、ResNe…

【Mac】安装 VMware Fusion Pro

VMware Fusion Pro 软件已经正式免费提供给个人用户使用&#xff01; 1、下载 【官网】 下拉找到 VMware Fusion Pro Download 登陆账号 如果没有账号&#xff0c;点击右上角 LOGIN &#xff0c;选择 REGISTER 注册信息除了邮箱外可随意填写 登陆时&#xff0c;Username为…

基于springboot+vue实现的网上书店系统 (源码+L文)

基于springbootvue实现的网上书店系统 &#xff08;源码L文&#xff09;4-104 5.1 系统主要功能设计 整体系统的主要功能模块如图5-1&#xff1a; 图5-1系统总体功能图 5.1.1 用户端功能 用户端的主要功能设计包括首页、图书信息、商城公告、购物车等模块&#xff0c;这些功…

鸿蒙5.0时代:原生鸿蒙应用市场引领开发者服务新篇章

前言 10月22日原生鸿蒙之夜发布会宣布HarmonyOS NEXT正式发布&#xff0c;首个版本号&#xff1a;鸿蒙5.0。这次“纯血鸿蒙”脱离了底层安卓架构成为纯国产的独立系统&#xff0c;仅凭这一点就有很多想象空间。 目前鸿蒙生态设备已超10亿&#xff0c;原生鸿蒙操作系统在中国市…

Python 多个版本管理 -- 最简方式

目录 一、下载Python文件 二、安装文件&#xff0c;并配置环境变量 三、重命名Python.exe 四、配置完毕&#xff0c;开始使用&#xff0c;效果图 一、下载Python文件 Python 官方地址The official home of the Python Programming Languagehttps://www.python.org/downloa…

C#的Event事件示例小白级剖析

1、委托Delegate 首先说一下delegate委托&#xff0c;委托是将方法作为参数进行传递。 // 定义了一个委托类型public delegate void MyDelegate(int num);// 定义了一个啥也不干的委托实例public MyDelegate m_delegate _ > {};// 定义了一个和委托相同格式的方法public …

流畅!HTMLCSS打造网格方块加载动画

效果演示 这个动画的效果是五个方块在网格中上下移动&#xff0c;模拟了一个连续的加载过程。每个方块的动画都是独立的&#xff0c;但是它们的时间间隔和路径被设计为相互协调&#xff0c;以创建出流畅的动画效果。 HTML <div class"loadingspinner"><…

Java Iterator 实现杨辉三角

一、问题描述 杨辉三角定义如下&#xff1a; 1/ \1 1/ \ / \1 2 1/ \ / \ / \1 3 3 1/ \ / \ / \ / \1 4 6 4 1/ \ / \ / \ / \ / \ 1 5 10 10 5 1 把每一行看做一个list&#xff0c;试写一个 Iterator&#xff0c;不断输出下一行的 list&#xf…

PostGis--几何构造函数

目录 1、简介2、ST_Centroid / ST_PointOnSurface3、ST_Buffer4、ST_Intersection5、ST_Union6、substr和substringPS: 1、简介 接着上一个文章&#xff1a; 到目前为止&#xff0c;我们看到的所有函数都“按原样”处理几何图形并返回 对象分析&#xff08;ST_Length&#xf…

衡石分析平台最佳实践-开发场景之分层级嵌入

分层级嵌入 平台整体嵌入 在这种应用场景中&#xff0c;把所有功能通过 iframe 的方式都开放给登陆用户&#xff0c;嵌入的示例如下&#xff1a; html <iframename""src"https://preview.hengshi.com/app/1"> </iframe> 1 2 3 4 单个模…