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

news2024/11/4 21:01:36

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.coloradmin.cn/o/2232077.html

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

相关文章

ZDH权限-扩展支持数据权限

目录 项目源码 预览地址 安装包下载地址 ZDH权限模块 ZDH权限扩展更细粒度方案 第一种方案&#xff1a; 第二种方案&#xff1a; ZDH权限扩展支持数据权限-新增属性 总结 感谢支持 项目源码 zdh_web: GitHub - zhaoyachao/zdh_web: 大数据采集,抽取平台 预览地址 后…

私有化视频平台EasyCVR海康大华宇视视频平台视频诊断技术是如何实时监测视频质量的?

在现代视频监控系统中&#xff0c;确保视频流的质量和稳定性至关重要。随着技术的进步&#xff0c;视频诊断技术已经成为实时监测视频质量的关键工具。这种技术通过智能分析算法对视频流进行实时评估和处理&#xff0c;能够自动识别视频中的各种质量问题&#xff0c;并给出相应…

Java 用户随机选择导入ZIP文件,解压内部word模板并入库,Windows/可视化Linux系统某麒麟国防系统...均可适配

1.效果 压缩包内部文件 2.依赖 <!--支持Zip--><dependency><groupId>net.lingala.zip4j</groupId><artifactId>zip4j</artifactId><version>2.11.5</version></dependency>总之是要File类变MultipartFile类型的 好像是…

论文笔记(五十四)pi0: A Vision-Language-Action Flow Model for General Robot Control

π0: A Vision-Language-Action Flow Model for General Robot Control 文章概括摘要I. INTRODUCTIONII. RELATED WORKIII. OVERVIEWIV. π 0 \pi_0 π0​模型V. 数据收集和培训配方A. 预训练和后训练B. 语言和高级策略C. 机器人系统细节 VI. 实验评估A. 基础模型评估B. 遵循语…

《AI产品经理手册》——解锁AI时代的商业密钥

在当今这个日新月异的AI时代&#xff0c;每一位产品经理都面临着前所未有的挑战与机遇&#xff0c;唯有紧跟时代潮流&#xff0c;深入掌握AI技术的精髓&#xff0c;才能在激烈的市场竞争中独占鳌头。《AI产品经理手册》正是这样一部为AI产品经理量身定制的实战宝典&#xff0c;…

论文略读:Self-Knowledge Guided Retrieval Augmentation for Large Language Models

2023 emnlp findings RAG 召回的辅助信息不总是有用&#xff0c;甚至可能起负作用 原本对“德牧能不能进机场”这样的问题&#xff0c;ChatGPT是高度认可德牧作为导盲犬的但是检索模块召回了一段“老德牧是一类 balabala 某种狗的争议性名称”的百科介绍作为额外上文输入后&am…

使用Postman进行API测试

&#x1f493; 博客主页&#xff1a;瑕疵的CSDN主页 &#x1f4dd; Gitee主页&#xff1a;瑕疵的gitee主页 ⏩ 文章专栏&#xff1a;《热点资讯》 使用Postman进行API测试 Postman 简介 安装 Postman 创建请求 组织请求 发送请求 查看响应 使用环境变量 编写测试脚本 示例测试…

鸿蒙系统的优势 不足以及兼容性与未来发展前景分析

2024 年 10 月 22 日&#xff1a;华为正式发布原生鸿蒙操作系统 HarmonyOS next&#xff0c;并正式命名为 HarmonyOS 5&#xff0c;这是鸿蒙系统史上最大的升级&#xff0c;实现了国产操作系统从底层架构到应用生态的全面自主可控。 鸿蒙系统与安卓、iOS 相比&#xff0c;具有…

MT1421-MT1430 码题集 (c 语言详解)

目录 MT1421异或 MT1422总位数 MT1423被3整除 MT1424卡特兰序列 MT1425小码哥的序列 MT1426普洛尼克数 MT1427素数序列 MT1428最小素数因子 MT1429最小正整数 MT1430回文数组 MT1421异或 给定一个由N(<1000)个整数组成的数组&#xff0c;把数组元素任意两两进行异或&#x…

游游的游戏大礼包

游游的游戏大礼包 import java.util.*; public class Main {public static void main(String[] args) {Scanner in new Scanner(System.in);long n in.nextInt();long m in.nextInt();long a in.nextInt();long b in.nextInt();long ret 0;for(long x 0; x < Math.…

SpringBoot框架:作业管理系统构建之道

摘 要 使用旧方法对作业管理信息进行系统化管理已经不再让人们信赖了&#xff0c;把现在的网络信息技术运用在作业管理信息的管理上面可以解决许多信息管理上面的难题&#xff0c;比如处理数据时间很长&#xff0c;数据存在错误不能及时纠正等问题。 这次开发的作业管理系统有管…

Python小游戏19——滑雪小游戏

运行效果 python代码 import pygame import random # 初始化Pygame pygame.init() # 设置屏幕尺寸 screen_width 800 screen_height 600 screen pygame.display.set_mode((screen_width, screen_height)) pygame.display.set_caption("滑雪小游戏") # 定义颜色 WH…

自定义规则配置教程

大家在使用waf的时候&#xff0c;因为业务特殊性和waf的严格校验&#xff0c;有时会产生误报&#xff0c;阻拦合法流量。 这个时候&#xff0c;只能通过自定义规则进行补充&#xff0c;选择加白名单或者黑名单。 很多人会说配置黑白名单失效了&#xff0c;其实95%以上都是自己…

HarmonyOS ArkTS Web组件jsbridge

1. HarmonyOS ArkTS Web组件jsbridge 1.1. Web组件引入和调用JS库 关于ts可以调用JS库&#xff0c;可以使用以下几种方式&#xff1a;文档中心&#xff1a;https://developer.huawei.com/consumer/cn/doc/harmonyos-faqs-V5/faqs-arkweb-kit-V5 1.1.1. 鸿蒙系统H5 JSBridge的…

C++笔试题之实现一个定时器

一.定时器&#xff08;timer&#xff09;的需求 1.执行定时任务的时&#xff0c;主线程不阻塞&#xff0c;所以timer必须至少持有一个线程用于执行定时任务 2.考虑到timer线程资源的合理利用&#xff0c;一个timer需要能够管理多个定时任务&#xff0c;所以timer要支持增删任务…

DICOM标准:CR图像模块属性详解——计算放射线照相术(CR)及其在DICOM中的表示

目录 CR图像及其在DICOM中的表示 1 计算放射线照相术 1.1 CR序列组件 1.1 -- CR 序列模块属性 1.2 CR 图像模块 表1.2 -- CR 图像模块属性 结论 CR图像及其在DICOM中的表示 计算放射线照相术&#xff08;Computed Radiography, CR&#xff09;是一种利用计算机技术对传统…

[Prometheus学习笔记]从架构到案例,一站式教程

文章目录 Prometheus 优势Prometheus 的组件、架构Prometheus Server 直接从监控目标中或者间接通过推送网关来拉取监控指标&#xff0c;它在本地存储所有抓取到的样本数据&#xff0c;并对此数据执行一系列规则&#xff0c;以汇总和记录现有数据的新时间序列或生成告警。可以通…

Javaweb梳理3——SQL概述+DDL语句1

Javaweb梳理3——SQL概述DDL语句1 Javaweb梳理3——SQL概述DDL语句13.1 SQL简介3.2 通用语法3.3 SQL分类3.4 DDL:操作数据库3.4.1 查询数据库3.4.2 创建数据库3.4.3 删除数据库3.4.4 使用数据库 Javaweb梳理3——SQL概述DDL语句1 3.1 SQL简介 英文&#xff1a;Structured Que…

HarmonyOS Next星河版笔记--界面开发(2)

ArkUI-界面开发 位置&#xff1a;在build(){}中去编写代码 //以前学基础 ->写代码的位置&#xff08;页面顶部&#xff09; Entry Component struct Index {State message: string Hello World; //构建 -> 页面build() {//行//列RelativeContainer() {//文本 函数名&a…

使用PostgreSQL进行高效数据管理

&#x1f493; 博客主页&#xff1a;瑕疵的CSDN主页 &#x1f4dd; Gitee主页&#xff1a;瑕疵的gitee主页 ⏩ 文章专栏&#xff1a;《热点资讯》 使用PostgreSQL进行高效数据管理 PostgreSQL简介 安装PostgreSQL 在Ubuntu上安装PostgreSQL 在CentOS上安装PostgreSQL 在macOS上…