「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.rhkb.cn/news/464332.html

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

相关文章

前端Election

一.什么是Election 1.一款应用广泛的跨平台和桌面应用开发框架。 2.本质 Election的本质是结合了Chromium与Node.js 3.构建 使用HTML ,CSS,JS等Web技术构建桌面应用程序。 只要最后能转换成html css js即可 二.流程模型 1.主进程 关于node.js的任何api都在这里调用 一个纯…

(七)JavaWeb后端开发——Maven

目录 1.Maven概述 2.Maven依赖管理 2.1依赖配置 2.2依赖传递 2.3依赖范围 2.4生命周期 1.Maven概述 maven是一款管理和构建java项目的工具 Maven的作用&#xff1a; 依赖管理&#xff1a;方便快捷的管理项目依赖的资源(jar包)&#xff0c;避免版本冲突问题统一项目结构…

运维工具之docker入门

1.容器与docker 1.什么是容器&#xff1f; 容器是一种轻量级的&#xff0c;可移植的软件运行环境。它将软件程序本身及软件依赖库打包在一起。可以在不同平台和系统上运行。 2.什么是LXC LXC就是Linux container,。LXC是一种虚拟化技术&#xff0c;可以在操作系统层级上为应…

【设计模式系列】组合模式(十二)

目录 一、什么是组合模式 二、组合模式的角色 三、组合模式的典型应用 四、组合模式在Mybatis SqlNode中的应用 4.1 XML映射文件案例 4.2 Java代码使用案例 一、什么是组合模式 组合模式&#xff08;Composite Pattern&#xff09;是一种结构型设计模式&#xff0c;其核…

FFmpeg 4.3 音视频-多路H265监控录放C++开发十二:在屏幕上显示多路视频播放,可以有不同的分辨率,格式和帧率。

上图是在安防领域的要求&#xff0c;一般都是一个屏幕上有显示多个摄像头捕捉到的画面&#xff0c;这一节&#xff0c;我们是从文件中读取多个文件&#xff0c;显示在屏幕上。

Linux下Java的多种方式安装

Linux下Java的多种方式安装 博客&#xff1a; www.lstar.icu 开源地址 Gitee 地址&#xff1a; https://gitee.com/lxwise/iris-blog_parent Github 地址&#xff1a; https://github.com/lxwise/iris-blog_parent 序言 Java是一门面向对象的编程语言&#xff0c;不仅吸收了…

鸿蒙进阶-AlphabetIndexer组件

大家好&#xff0c;这里是鸿蒙开天组&#xff0c;今天我们来学习AlphabetIndexer组件&#xff0c;喜欢就点点关注吧&#xff01; 通过 AlphabetIndexer 组件可以与容器组件结合&#xff0c;实现导航联动&#xff0c;以及快速定位的效果 核心用法 AlphabetIndexer不是容器组件…

WordPress之generatepress主题安装

1.打开主题列表 2.如果没有自己需要主题点击安装新主题 点击安装并启用 3.不喜欢的 主题可以点击主题进去删除 4.主题自定义编辑 打开自定义&#xff0c;可以修改布局&#xff0c;颜色&#xff0c;排版等等

我们来学mysql -- 同时使用 AND 和 OR 查询错误(填坑篇)

AND 和 OR 一同使用问题 现象分析处理扩展 现象 业务上在“锁定”当前零件所在出口国的所有零件时&#xff0c;出现其他国家零件 问题定位 分析 or 切断了操作符之间的连续性&#xff0c;从union角度分析 where k1 Td621 and k1 Vda96 or k3 P00009等同 select * fr…

CloudCompare——基于连通性的点云分类【2024最新版】

目录 1.实现原理2.找到连通性分类功能3.设置计算参数4.分类结果5.完整操作流程 1.实现原理 见&#xff1a;http://en.wikipedia.org/wiki/Connected-component_labeling。 2.找到连通性分类功能 “Tools > Segmentation > Label Connected Comp”菜单进行打开 3.设置…

Axure大屏可视化模板:赋能各行各业的数据展示与管理

如何高效、直观地展示和分析数据&#xff0c;成为企业和机构面临的重要挑战。Axure大屏可视化模板作为一种先进的数据展示工具&#xff0c;凭借其强大的交互性和直观性&#xff0c;在多个领域内得到了广泛应用。从农业生产的智能化管理到城市发展的精细化管理&#xff0c;再到企…

模型 海勒姆法则(用户依赖你未承诺的API功能)

系列文章 分享 模型&#xff0c;了解更多&#x1f449; 模型_思维模型目录。用户总会以你意想不到的方式使用你的产品。 1 海勒姆法则的应用 1.1 社交网络平台API的变更 一个流行的社交网络平台“Socialville”拥有数百万用户&#xff0c;它提供了一个API&#xff0c;允许开发…

Rust 力扣 - 1423. 可获得的最大点数

文章目录 题目描述题解思路题解代码题目链接 题目描述 题解思路 题目所求结果存在下述等式 可获得的最大点数 所有卡牌的点数之和 - 长度为&#xff08;卡牌数量 - k&#xff09;的窗口的点数之和的最小值 我们遍历长度为&#xff08;卡牌数量 - k&#xff09;的窗口&#…

如何对LabVIEW软件进行性能评估?

对LabVIEW软件进行性能评估&#xff0c;可以从以下几个方面着手&#xff0c;通过定量与定性分析&#xff0c;全面了解软件在实际应用中的表现。这些评估方法适用于确保LabVIEW程序的运行效率、稳定性和可维护性。 一、响应时间和执行效率 时间戳测量&#xff1a;使用LabVIEW的时…

「Mac畅玩鸿蒙与硬件28」UI互动应用篇5 - 滑动选择器实现

本篇将带你实现一个滑动选择器应用&#xff0c;用户可以通过滑动条选择不同的数值&#xff0c;并实时查看选定的值和提示。这是一个学习如何使用 Slider 组件、状态管理和动态文本更新的良好实践。 关键词 UI互动应用Slider 组件状态管理动态数值更新用户交互 一、功能说明 在…

docker pull 拉取镜像失败,使用Docker离线包

1、登录并注册Github&#xff0c;然后在Github中搜索并打开“wukongdaily/DockerTarBuilder” 项目&#xff0c;在该项目主页点击“Fork”。 然后点 “Create Fork”&#xff0c;将项目创建到自己的Github主页。 2、接着在自己创建过来的这个项目中点击“Actions” 3、然后…

使用JdbcTemplate 进行数据库的增、删、改、查

一、概述 1、为什么选择 Spring Boot ? Spring Boot 是目前 Java 社区最流行、最有影响力的技术之一&#xff0c;也是下一代企业级应用开发的首选技术。Spring Boot 由 Spring 衍生而来&#xff0c;继承了其所有的有点&#xff0c;为开发者带来了巨大的便利。 “We use a lo…

EHOME视频平台EasyCVR萤石设备视频接入平台视频诊断技术可以识别哪些视频质量问题?

EasyCVR视频监控汇聚管理平台是一款针对大中型项目设计的跨区域网络化视频监控集中管理平台。萤石设备视频接入平台EasyCVR不仅具备视频资源管理、设备管理、用户管理、运维管理和安全管理等功能&#xff0c;还支持多种主流标准协议&#xff0c;如GB28181、GB35114、RTSP/Onvif…

这款Chrome 插件,帮助我们复制网页上不能复制的内容

前言 最近在上网查找博客时&#xff0c;经常遇到想要复制网页上的内容&#xff0c;但是&#xff0c;一点击复制&#xff0c;就会弹出来各种各样的弹框&#xff0c;导致复制不能继续&#xff0c;非常麻烦。这时&#xff0c;我想到了一个办法&#xff0c;那就是下载安装一个chro…

数字后端零基础入门系列 | Innovus零基础LAB学习Day8

###LAB15 Detail Routing for Signal Integrity, Timing, Power and Design for Yield 这个章节虽然标题有点长&#xff0c;但不要被它吓到&#xff0c;其实这个章节就是Innovus工具的绕线Routing。只不过这个阶段做Route不是仅仅是把所有的逻辑连接&#xff0c;用实际的金属层…