当前位置：首页 > news >正文

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

news 2025/6/16 12:42:39

本篇将带你实现一个滑动选择器应用，用户可以通过滑动条选择不同的数值，并实时查看选定的值和提示。这是一个学习如何使用 Slider 组件、状态管理和动态文本更新的良好实践。

在这里插入图片描述

关键词

UI互动应用
Slider 组件
状态管理
动态数值更新
用户交互

一、功能说明

在这个滑动选择器应用中，用户通过滑动条选择值，应用实时更新并显示当前选择的值。根据不同的数值范围，文本提示会变化，增加交互效果。

二、所需组件

@Entry 和 @Component 装饰器
Column 和 Row 布局组件
Text 组件用于显示文本
Slider 组件用于滑动选择
@State 修饰符用于状态管理

项目结构

项目名称：SliderSelectorApp
自定义组件名称：SliderSelectorPage
代码文件：SliderSelectorPage.ets、Index.ets

三、代码实现

// 文件名：SliderSelectorPage.ets// 定义滑动选择器页面组件
@Component
export struct SliderSelectorPage {// 定义一个状态变量 selectedValue，用 @State 修饰符管理其状态变化@State selectedValue: number = 50; // 初始值设为 50// build() 方法构建页面布局和组件build() {Column({ space: 20 }) { // 创建垂直布局容器，子组件之间的间距为 20// 显示当前选择的数值Row() {Text(`当前选择的值: ${this.selectedValue}`) // 显示选定的值.fontSize(24) // 设置字体大小.fontWeight(FontWeight.Bold) // 设置字体为粗体.alignSelf(ItemAlign.Center) // 水平居中对齐.fontColor(Color.Black); // 设置文本颜色为黑色}// 滑动选择器组件Slider({ min: 0, max: 100, value: this.selectedValue }) // 创建滑动选择器，范围为 0-100.onChange((value: number) => { // 滑动时触发事件this.selectedValue = value; // 更新选定的值}).blockColor(Color.Blue) // 设置滑块颜色.trackColor(Color.Gray) // 设置滑动条背景颜色.width('80%') // 设置宽度为 80%.alignSelf(ItemAlign.Center); // 水平居中对齐// 动态显示提示文本，根据选定的值显示不同的提示和颜色Row() {Text(this.getFeedbackMessage()) // 获取反馈文本.fontSize(18) // 设置字体大小.alignSelf(ItemAlign.Center) // 水平居中对齐.fontColor(this.getFeedbackColor()); // 设置文本颜色}}.padding(20) // 设置内边距.width('100%') // 设置容器宽度为 100%.height('100%') // 设置容器高度为 100%.alignItems(HorizontalAlign.Center); // 垂直居中对齐}// 根据当前值返回不同的提示信息private getFeedbackMessage(): string {if (this.selectedValue > 75) {return '高值选择';} else if (this.selectedValue < 25) {return '低值选择';} else {return '中间值';}}// 根据当前值返回不同的文本颜色private getFeedbackColor(): Color {if (this.selectedValue > 75) {return Color.Red; // 返回红色} else if (this.selectedValue < 25) {return Color.Blue; // 返回蓝色} else {return Color.Green; // 返回绿色}}
}

// 文件名：Index.ets// 导入滑动选择器页面组件
import { SliderSelectorPage } from './SliderSelectorPage'// 定义应用入口组件
@Entry
@Component
struct Index {// build() 方法构建页面布局和组件build() {Column() {SliderSelectorPage() // 引用自定义的滑动选择器组件}.padding(20) // 设置页面内边距}
}

效果示例：用户拖动滑动条时，选定的值会实时更新并显示。根据值的范围，文本提示内容和颜色会动态变化。

四、代码解读

@State selectedValue：
定义一个状态变量，用于保存当前滑动条的值。状态变化时，UI 会自动刷新。
Slider 组件：
实现滑动选择功能，并通过 onChange 事件更新 selectedValue。
getFeedbackMessage() 和 getFeedbackColor() 方法：
根据 selectedValue 返回不同的提示文本和颜色，实现动态反馈。