「Mac畅玩鸿蒙与硬件41」UI互动应用篇18 - 多滑块联动控制器

本篇将带你实现一个多滑块联动的控制器应用。用户可以通过拖动多个滑块,动态控制不同参数(如红绿蓝三色值),并实时显示最终结果。我们将以动态颜色调节为例,展示如何结合状态管理和交互逻辑,打造一个高级的滑块控制器应用。

在这里插入图片描述


关键词
  • UI互动应用
  • 自定义滑块
  • 多滑块联动
  • 状态管理
  • 用户交互

一、功能说明

多滑块联动控制器应用允许用户通过调整多个滑块来控制参数,并实时显示结果。本示例以 RGB 三色调节为例,用户可以:

  1. 分别调整红、绿、蓝三个滑块的值。
  2. 实时查看滑块组合后的颜色结果。
  3. 点击按钮重置滑块值。

二、所需组件
  • @Entry@Component 装饰器
  • ColumnRow 布局组件
  • Slider 组件用于滑块交互
  • Text 组件用于显示滑块值和结果提示
  • Button 组件用于重置滑块值
  • @State 修饰符用于状态管理

三、项目结构
  • 项目名称MultiSliderApp
  • 自定义组件名称MultiSliderPageMultiSlider
  • 代码文件MultiSliderPage.etsIndex.etsMultiSlider.ets

四、代码实现
// 文件名:MultiSliderPage.ets
import { MultiSlider } from "./MultiSlider";

@Component
export struct MultiSliderPage {
  @State colors: number[] = [128, 128, 128]

  build() {
    Column({ space: 20 }) {
      // 显示当前颜色结果
      Text(`当前颜色: rgb(${this.colors[0]}, ${this.colors[1]}, ${this.colors[2]})`)
        .fontSize(20)
        .alignSelf(ItemAlign.Center);

      // 显示颜色预览框
      Row() {
        Image($r('app.media.cat'))
          .width(85)
          .height(100)
          .borderRadius(5); // 增加猫的圆角效果
      }
      .width('100%')
      .height(120)
      .backgroundColor(this.getRGBColor())
      .borderRadius(10)
      .justifyContent(FlexAlign.Center);

      // 调用颜色滑块组件,直接传递 @State 的值
      MultiSlider({
        label: '红色',
        value: this.colors[0], // 传递父组件的值
        color: Color.Red,
        colors: this.colors
      });

      MultiSlider({
        label: '绿色',
        value: this.colors[1], // 传递父组件的值
        color: Color.Green,
        colors: this.colors
      });

      MultiSlider({
        label: '蓝色',
        value: this.colors[2], // 传递父组件的值
        color: Color.Blue,
        colors: this.colors
      });

      // 重置按钮
      Button('重置')
        .onClick(() => this.resetValues())
        .backgroundColor(Color.Gray)
        .fontColor(Color.White)
        .width('50%')
        .alignSelf(ItemAlign.Center);
    }
    .padding(20)
    .width('100%')
    .height('100%')
    .alignItems(HorizontalAlign.Center);
  }

  // 获取 RGB 颜色字符串
  private getRGBColor(): string {
    return `rgb(${this.colors[0]}, ${this.colors[1]}, ${this.colors[2]})`;
  }

  // 重置滑块值
  private resetValues() {
    this.colors[0] = 128;
    this.colors[1] = 128;
    this.colors[2] = 128;
  }
}
// 文件名:Index.ets
import { MultiSliderPage } from "./MultiSliderPage";  // 引入 MultiSliderPage

@Entry
@Component
export struct Index {
  build() {
    Column({ space: 20 }) {
      // 这里渲染 MultiSliderPage 组件
      MultiSliderPage();  // 使用 MultiSliderPage 组件
    }
    .padding(20)
    .width('100%')
    .height('100%')
    .alignItems(HorizontalAlign.Center);
  }
}
// 文件名:MultiSlider.ets
@Component
export struct MultiSlider {
  @Prop label: string = '';  // 标签
  @Prop value: number = 0;
  @Prop color: Color = Color.White; // 滑块颜色
  @State colors: number[] = [128, 128, 128]

  build() {
    Column({ space: 10 }) {
      // 显示标签和当前值
      Text(`${this.label}: ${this.value}`)
        .fontSize(18)
        .fontWeight(FontWeight.Bold)
        .fontColor(this.color);

      // 滑块组件
      Slider({
        min: 0,     // 最小值
        max: 255,   // 最大值
        value: this.value,  // 当前值
      })
        .blockColor(this.color)  // 设置滑块颜色
        .onChange((newValue: number) => {
          this.value = newValue;  // 更新 @State 的值
          if (this.color == Color.Red) {
            this.colors[0] = newValue
          }
          else if (this.color == Color.Green) {
            this.colors[1] = newValue
          }
          else if (this.color == Color.Blue) {
            this.colors[2] = newValue
          }
        })
        .width('90%')
        .alignSelf(ItemAlign.Center);
    }
    .margin({ top: 10 });
  }
}

效果示例:用户可以通过拖动红、绿、蓝三个滑块调整颜色值,动态显示颜色预览,并通过重置按钮恢复初始值。

在这里插入图片描述


五、代码解读
  • 动态滑块联动:通过 @State 分别管理红、绿、蓝三个滑块的值,动态计算 rgb 颜色并更新预览框背景。
  • Slider 组件封装:使用 createSlider 方法简化滑块的创建逻辑,提高代码复用性。
  • 重置功能:点击重置按钮后,通过 resetValues 方法将滑块值重置为初始值。

六、优化建议
  1. 增加色彩渐变背景:为滑块添加渐变背景,帮助用户直观理解颜色值变化。
  2. 保存颜色历史记录:记录用户调整过的颜色值,方便快速恢复或对比。
  3. 支持多种颜色模式:增加 HSL 或 HEX 模式切换,扩展功能适用性。

七、相关知识点
  • 「Mac畅玩鸿蒙与硬件11」鸿蒙 UI 组件篇1 - Text 和 Button 组件详解
  • 「Mac畅玩鸿蒙与硬件13」鸿蒙 UI 组件篇3 - Slider 组件的使用

小结

通过多滑块联动控制器的实现,用户可以体验到复杂交互场景中 Slider 组件的高级用法,并学习状态管理与动态界面更新的结合应用。本应用提供了实用的交互功能,是学习鸿蒙 UI 开发的重要案例。


下一篇预告

在下一篇「UI互动应用篇19 - 数字键盘应用」中,我们将探索如何实现一个数字键盘,支持用户输入数字并动态更新显示。


上一篇: 「Mac畅玩鸿蒙与硬件40」UI互动应用篇17 - 照片墙布局
下一篇: 「Mac畅玩鸿蒙与硬件42」UI互动应用篇19 - 数字键盘应用

作者:SoraLuna
链接:https://www.nutpi.net/thread?topicId=343
來源:坚果派
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。


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

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

相关文章

数字IC前端学习笔记:脉动阵列的设计方法学(以串行FIR滤波器为例)

相关阅读数字IC前端_日晨难再的博客-CSDN博客https://blog.csdn.net/weixin_45791458/category_12173698.html?spm1001.2014.3001.5482 引言 脉动结构(也称为脉动阵列)表示一种有节奏地计算并通过系统传输数据的处理单元(PEs)网络。这些处理单元有规律地…

图片预处理技术介绍4——降噪

图片预处理 大家好,我是阿赵。   这一篇将两种基础的降噪算法。   之前介绍过均值模糊和高斯模糊。如果从降噪的角度来说,模糊算法也算是降噪的一类,所以之前介绍的两种模糊可以称呼为均值降噪和高斯降噪。不过模糊算法对原来的图像特征的…

【数据中心建设资料】数据中心安全建设解决方案,数据中心整理解决方案,数据中心如何做到安全保障,数据中台全方案(Word全原件)

第一章 解决方案 1.1 建设需求 1.2 建设思路 1.3 总体方案 信息安全系统整体部署架构图 1.3.1 IP准入控制系统 1.3.2 防泄密技术的选择 1.3.3 主机账号生命周期管理系统 1.3.4 数据库账号生命周期管理系统 1.3.5 双因素认证系统 1.3.6 数据库审计系统 1.3.7 数据脱敏系统 1.3.8…

十,[极客大挑战 2019]Secret File1

点击进入靶场 查看源代码 有个显眼的紫色文件夹,点击 点击secret看看 既然这样,那就回去查看源代码吧 好像没什么用 抓个包 得到一个文件名 404 如果包含"../"、"tp"、"input"或"data",则输出"…

UE5 C++ 不规则按钮识别,复选框不规则识别 UPIrregularWidgets

插件名称:UPIrregularWidgets 插件包含以下功能 你可以点击任何图片,而不仅限于矩形图片。 UPButton、UPCheckbox 基于原始的 Button、Checkbox 扩展。 复选框增加了不规则图像识别功能,复选框增加了悬停事件。 欢迎来到我的博客 记录学习过…

【数据结构】手搓链表

一、定义 typedef struct node_s {int _data;struct node_s *_next; } node_t;typedef struct list_s {node_t *_head;node_t *_tail; } list_t;节点结构体(node_s): int _data;存储节点中的数据struct node_s *_next;:指向 node…

【Win11的Bug】无法在文件夹中创建txt文件

问题 右键只能新建文件夹 , 无法新建txt文本文档 解决办法 将注册表中的一个参数从1改为0即可. 具体内容: WinR输入regeditHKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Policies\System 将1改为0(下面这张图我已改过) 4.然后重新启动电脑即可 小技…

基于Matlab三点雨流计数法的载荷时间历程分析与循环疲劳评估

随着工程领域中机械设备和结构系统的复杂性不断增加,疲劳分析成为评估其可靠性与使用寿命的关键环节。载荷时间历程数据在疲劳分析中扮演着重要角色,而雨流计数法作为经典的循环计数方法,能够有效地从载荷时间历程中提取疲劳载荷循环信息。本…

二、部署docker

二、安装与部署 2.1 安装环境概述 Docker划分为CE和EE,CE为社区版(免费,支持周期三个月),EE为企业版(强调安全,付费使用)。 Docker CE每月发布一个Edge版本(17.03&…

python + PPT

ppt转化为word 对于PPT中的文本内容,如何转化为word内容呢?下面的代码可以实现如下功能 代码如下: from pptx import Presentation from docx import Documentdef clean_text(text):"""清理文本,移除控制字符&quo…

linux运维命令

防火墙相关命令 防火墙规则查看 firewall-cmd --list-all 禁ping firewall-cmd --permanent --add-rich-rulerule protocol valueicmp drop firewall-cmd --reload 执行完以上命令后,通过firewall-cmd --list-all查看规则生效情况 firewall-cmd --list-all 其…

论文笔记:Asymptotic Midpoint Mixup for Margin Balancing and Moderate Broadening

1. Motivation 在特征空间中,特征之间的collapse会导致representation learning 中的关键问题,这是因为特征之间不可区分。基于线性插值的增强方法(例如 mixup)已经显示出它们在缓解类间塌陷(称为inter-class collaps…

Elasticsearch之索引的增删改查(6.x版本)-yellowcong

1. 节点信息查看 #查看集群健康情况 curl -X GET localhost:9200/_cat/health?v&pretty#查看节点信息 curl -X GET localhost:9200/_cat/nodes?v&pretty 2. 索引管理 在es中,索引就相当于是mysql中的库了。 #查看索引列表 curl -X GET localhost:9200/…

Linux红帽认证有哪些等级?RHCE含金量如何?

工 仲 好:IT运维大本营哈喽,大家好! 红帽认证,作为一个备受瞩目的认证体系,其完善程度在行业内有口皆碑。 它清晰地划分为三个等级,分别是初级、中级和高级,每个等级都具有独特的要求和价值。…

ArcGIS求取多个点距离线要素的最近距离以及距离倒数

本文介绍在ArcMap软件中,对于点要素中的每一个点,求取其距离最近的道路的距离、距离倒数的方法。 首先,看一下本文的需求。现在已知一个点要素,其中含有多个点,假设每一个点表示城市中的一家商店;同时&…

大数据实验E5HBase:安装配置,shell 命令和Java API使用

实验目的 熟悉HBase操作常用的shell 命令和Java API使用; 实验要求 掌握HBase的基本操作命令和函数接口的使用; 实验平台 操作系统:Linux(建议Ubuntu16.04或者CentOS 7 以上);Hadoop版本:3…

跑一下pyapp

文档:How-to - PyApp 首先没有rust要安装 安装 Rust - Rust 程序设计语言 查看是否安装成功 然后clone下pyapp https://github.com/ofek/pyapp/releases/latest/download/source.zip -OutFile pyapp-source.zip 进入目录中,cmd,设置环境…

Python_Flask01

所有人都不许学Java了,都来学Python! 如果不来学的话请网爆我的老师---蔡老师 Flask的前世姻缘 我不知道,没啥用,要学好这个框架,其实多读书,多看报就行了,真心想了解的话! Welcom…

Unity性能优化---动态网格组合(一)

网格组合是将 Unity 中的多个对象组合为一个对象的技术。因此,在多物体的场景中,使用网格组合,会有效的减少小网格的数量,最终将得到一个包含许多小网格的大网格游戏对象,这将提高游戏或模拟器的性能。在Unity 的 “St…

Docker 逃逸突破边界

免责声明 本博客文章仅供教育和研究目的使用。本文中提到的所有信息和技术均基于公开来源和合法获取的知识。本文不鼓励或支持任何非法活动,包括但不限于未经授权访问计算机系统、网络或数据。 作者对于读者使用本文中的信息所导致的任何直接或间接后果不承担任何…