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

本篇将带你实现一个滑动选择器应用，用户可以通过滑动条选择差异的数值，并实时检察选定的值和提示。这是一个学习怎样使用 Slider 组件、状态管理和动态文本更新的精良实践。

---

关键词

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

---

一、功能阐明

在这个滑动选择器应用中，用户通过滑动条选择值，应用实时更新并体现当前选择的值。根据差异的数值范围，文本提示会变革，增长交互结果。

---

二、所需组件

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

项目布局

• 项目名称：SliderSelectorApp
  
• 自界说组件名称：SliderSelectorPage
  
• 代码文件：SliderSelectorPage.ets、Index.ets
  

---

三、代码实现

1. // 文件名：SliderSelectorPage.ets
3. // 定义滑动选择器页面组件
4. @Component
5. export struct SliderSelectorPage {
6.   // 定义一个状态变量 selectedValue，用 @State 修饰符管理其状态变化
7.   @State selectedValue: number = 50; // 初始值设为 50
9.   // build() 方法构建页面布局和组件
10.   build() {
11.     Column({ space: 20 }) { // 创建垂直布局容器，子组件之间的间距为 20
12.       // 显示当前选择的数值
13.       Row() {
14.         Text(`当前选择的值: ${this.selectedValue}`) // 显示选定的值
15.           .fontSize(24) // 设置字体大小
16.           .fontWeight(FontWeight.Bold) // 设置字体为粗体
17.           .alignSelf(ItemAlign.Center) // 水平居中对齐
18.           .fontColor(Color.Black); // 设置文本颜色为黑色
19.       }
21.       // 滑动选择器组件
22.       Slider({ min: 0, max: 100, value: this.selectedValue }) // 创建滑动选择器，范围为 0-100
23.         .onChange((value: number) => { // 滑动时触发事件
24.           this.selectedValue = value; // 更新选定的值
25.         })
26.         .blockColor(Color.Blue) // 设置滑块颜色
27.         .trackColor(Color.Gray) // 设置滑动条背景颜色
28.         .width('80%') // 设置宽度为 80%
29.         .alignSelf(ItemAlign.Center); // 水平居中对齐
31.       // 动态显示提示文本，根据选定的值显示不同的提示和颜色
32.       Row() {
33.         Text(this.getFeedbackMessage()) // 获取反馈文本
34.           .fontSize(18) // 设置字体大小
35.           .alignSelf(ItemAlign.Center) // 水平居中对齐
36.           .fontColor(this.getFeedbackColor()); // 设置文本颜色
37.       }
38.     }
39.     .padding(20) // 设置内边距
40.     .width('100%') // 设置容器宽度为 100%
41.     .height('100%') // 设置容器高度为 100%
42.     .alignItems(HorizontalAlign.Center); // 垂直居中对齐
43.   }
45.   // 根据当前值返回不同的提示信息
46.   private getFeedbackMessage(): string {
47.     if (this.selectedValue > 75) {
48.       return '高值选择';
49.     } else if (this.selectedValue < 25) {
50.       return '低值选择';
51.     } else {
52.       return '中间值';
53.     }
54.   }
56.   // 根据当前值返回不同的文本颜色
57.   private getFeedbackColor(): Color {
58.     if (this.selectedValue > 75) {
59.       return Color.Red; // 返回红色
60.     } else if (this.selectedValue < 25) {
61.       return Color.Blue; // 返回蓝色
62.     } else {
63.       return Color.Green; // 返回绿色
64.     }
65.   }
66. }

复制代码

1. // 文件名：Index.ets
3. // 导入滑动选择器页面组件
4. import { SliderSelectorPage } from './SliderSelectorPage'
6. // 定义应用入口组件
7. @Entry
8. @Component
9. struct Index {
10.   // build() 方法构建页面布局和组件
11.   build() {
12.     Column() {
13.       SliderSelectorPage() // 引用自定义的滑动选择器组件
14.     }
15.     .padding(20) // 设置页面内边距
16.   }
17. }

复制代码

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

  

---

四、代码解读

• @State selectedValue：
  界说一个状态变量，用于生存当前滑动条的值。状态变革时，UI 会主动革新。
  
• Slider 组件：
  实现滑动选择功能，并通过 onChange 变乱更新 selectedValue。
  
• getFeedbackMessage() 和 getFeedbackColor() 方法：
  根据 selectedValue 返回差异的提示文本和颜色，实现动态反馈。
  

---

五、优化发起

• 自界说滑动条样式：通过 blockColor 和 trackColor 自界说滑动条的表面，提升视觉结果。
  
• 添加最小和最大值标签：在滑动条的两头添加文本标签，如“0”和“100”。
  
• 滑动动画：为滑动条添加动画过渡，使用户体验更流畅。
  
• 多语言支持：根据用户的语言环境体现差异语言的提示文本。
  

---

六、相干知识点

• 「Mac畅玩鸿蒙与硬件15」鸿蒙UI组件篇5 - Slider和Progress组件
  
• 「Mac畅玩鸿蒙与硬件11」鸿蒙UI组件篇1 - Text和Button组件详解
  

---

小结

本篇教程通过滑动选择器应用的实现，你学会了怎样使用 Slider 组件来实现动态数值选择和体现。这为开辟更复杂的交互式应用打下了底子。

---

下一篇预报

下一篇「UI互动应用篇6 - 多选问卷小应用」将展示怎样实现用户多选问卷功能，并体现提交后的结果。

---

上一篇： 「Mac畅玩鸿蒙与硬件27」UI互动应用篇4 - 猫与灯的互动应用

下一篇： 「Mac畅玩鸿蒙与硬件29」UI互动应用篇6 - 多选问卷小应用

---

作者：SoraLuna
链接：https://www.nutpi.net/thread?topicId=284
來源：坚果派
著作权归作者全部。商业转载请接洽作者得到授权，非商业转载请注明出处。

---

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！qidao123.com:ToB企服之家，中国第一个企服评测及软件市场,开放入驻,技术点评得现金