「Mac畅玩鸿蒙与硬件41」UI互动应用篇18

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

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

在这里插入图片描述

关键词

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

一、功能说明

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

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

二、所需组件

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

三、项目结构

项目名称：MultiSliderApp
自定义组件名称：MultiSliderPage 、MultiSlider
代码文件：MultiSliderPage.ets、Index.ets、MultiSlider.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 });}
}