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

// 文件名：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; // 返回绿色
    }
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.

// 文件名：Index.ets

// 导入滑动选择器页面组件
import { SliderSelectorPage } from './SliderSelectorPage'

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