【鸿蒙开发】第11课，Slider滑动条组件和Span文本样式组件

1 Slider 组件

Slider 组件，即滑动条组件，是鸿蒙UI框架中提供的一个用于快速调节设置值的控件。它允许用户通过拖动滑块在预设的数值范围内进行选择，提供了直观且高效的交互体验。

1.1 Slider 组件的基本属性

Slider 组件提供了丰富的属性来定制其行为和外观。其中：

value ：表示当前进度值，类型为 number，支持双向绑定，能够动态反映滑块的位置。
min ：定义滑动条的最小值，类型为 number，默认值为 0。
max ：定义滑动条的最大值，类型为 number，默认值为 100。若 min 大于或等于 max，则 min 取默认值 0，max 取默认值 100。
step ：指定滑动步长，类型为 number，默认值为 1。取值范围在 [0.01, max - min] 之间。若设置的 step 值小于 0 或大于 max - min，则按默认值显示。
style ：设置滑块与滑轨的显示样式，类型为 SliderStyle，可选值包括 OutSet（滑块在滑轨外）和 InSet（滑块在滑轨内）等。
direction （API Version 8+）：指定滑动条的滑动方向，可选值为 Horizontal（水平）和 Vertical（竖直）。
reverse （API Version 8+）：决定滑动条取值范围是否反向，类型为 boolean，默认值为 false，即不反向。

此外，Slider 组件还支持多项高级属性，如：

blockColor：设置滑块的颜色。
trackColor：设置滑轨的背景颜色。
selectedColor：设置滑轨的已滑动部分颜色。
showSteps：决定是否显示步长刻度值。
showTips：设置滑动时是否显示气泡提示。
trackThickness：设置滑轨的粗细。

这些属性使得 Slider 组件非常灵活，能够满足各种用户界面需求。

1.2 Slider 组件的使用示例

typescript 复制代码

@Entry
@Component
struct Index {
  // 定义一个状态变量，用于存储第一个滑动条的模式字符串表示
  @State firstNumberMode: string = "40";

  build() {
    // 创建一个垂直布局的 Column 容器
    Column() {
      // 创建一个滑动条组件
      Slider({
        value: 40,       // 设置滑动条的初始值为 40
        max: 100,        // 设置滑动条的最大值为 100
        min: 20,         // 设置滑动条的最小值为 20
        step: 5,         // 设置滑动条的步长为 5
        style: SliderStyle.InSet, // 设置滑动条样式为滑块在滑轨内
        direction: Axis.Vertical  // 设置滑动条方向为竖直
      })
        .showSteps(true)   // 显示滑动条的步长刻度值
        .height('50%')     // 设置滑动条的高度为父容器的 50%
        .onChange((number: number, mode: SliderChangeMode) => {
          // 当滑动条值改变时触发的事件处理器
          // 更新状态变量，将当前值和模式字符串连接起来
          this.firstNumberMode = number + " | " + this.getSliderChangeModeStr(mode);
        })

      // 显示状态变量的值
      Text(this.firstNumberMode)

      // 添加一个分隔线，并设置上下边距
      Divider().margin(10)

      // 创建另一个滑动条组件
      Slider({
        value: 20,       // 设置滑动条的初始值为 20
        style: SliderStyle.OutSet // 设置滑动条样式为滑块在滑轨外
      })
        .blockColor(Color.Red)     // 设置滑块的颜色为红色
        .trackColor(Color.Green)   // 设置滑轨的背景颜色为绿色
        .selectedColor(Color.Yellow) // 设置滑轨的已滑动部分颜色为黄色
        .showTips(true)            // 滑动时显示气泡提示
        .width('80%')             // 设置滑动条的宽度为父容器的 80%
    }
    .height('100%')  // 设置 Column 容器的高度为父容器的 100%
    .width('100%')   // 设置 Column 容器的宽度为父容器的 100%
  }

  // 私有方法，用于将 SliderChangeMode 枚举值转换为字符串
  private getSliderChangeModeStr(mode: SliderChangeMode) {
    let modeStr = "" // 初始化模式字符串为空
    if (mode == SliderChangeMode.Begin) {
      modeStr = "Begin"; // 如果模式是 Begin，则设置模式字符串为 "Begin"
    } else if (mode == SliderChangeMode.Moving) {
      modeStr = "Moving"; // 如果模式是 Moving，则设置模式字符串为 "Moving"
    } else if (mode == SliderChangeMode.End) {
      modeStr = "End"; // 如果模式是 End，则设置模式字符串为 "End"
    } else if (mode == SliderChangeMode.Click) {
      modeStr = "Click"; // 如果模式是 Click，则设置模式字符串为 "Click"
    }
    return modeStr; // 返回模式字符串
  }
}

2 Span组件

Span组件是鸿蒙ArkUI框架中的一个重要文本控件，它作为Text组件的子组件存在，专门用于显示行内文本。Span组件提供了丰富的文本样式设置选项，使得开发者能够更精细地控制文本显示效果。

2.1 Span组件的属性与特性

Span组件提供了多种属性来设置文本的样式，包括但不限于：

fontColor：设置文本颜色。
fontSize：设置文本大小。
fontStyle：设置文本样式，如斜体（Italic）、正常（Normal）等。
fontWeight：设置文本粗细。
decoration：设置文本装饰线，如下划线（Underline）、删除线（LineThrough）、上划线（Overline）等，并可指定装饰线的颜色。
letterSpacing：设置文本字符间距。
textCase：设置文本大小写，如全部大写（UpperCase）、全部小写（LowerCase）等。
fontFamily：设置文本字体族。
textShadow：设置文字阴影效果。
lineHeight：设置文本行高（注意：此属性在Span组件中可能不直接支持，通常用于Text组件）。
textBackgroundStyle：设置文本背景样式（从API Version 12开始支持）。
baselineOffset：设置文本基线的偏移量（从API Version 12开始支持）。

此外，从API Version 10开始，Span组件支持继承父组件Text的属性。这意味着，如果子组件Span未设置某个属性，而父组件Text设置了该属性，则Span将继承该属性。

2.2 示例

typescript 复制代码

@Entry
@Component
struct Index {
  @State text: string = "Afra55" // 定义一个状态变量 `text`，初始值为字符串 "Afra55"

  build() {
    // 创建一个垂直布局的 Column 容器
    Column() {
      Text() { // 创建一个 Text 组件，用于包含多个 Span 子组件
        Span('Afra55')// 创建一个 Span 组件，显示文本 "Afra55"
          .decoration({ type: TextDecorationType.Underline, color: Color.Gray })// 设置下划线装饰，颜色为灰色
          .fontSize(20)// 设置字体大小为 20
          .fontColor(Color.Brown) // 设置字体颜色为棕色

        Span("\n") // 插入一个换行符

        Span('Afra55')// 创建一个 Span 组件，显示文本 "Afra55"
          .decoration({
            type: TextDecorationType.Underline,
            color: Color.Gray,
            style: TextDecorationStyle.DOTTED
          })// 设置虚线下划线装饰，颜色为灰色
          .fontSize(50) // 设置字体大小为 50

        Span('Afra55')// 创建一个 Span 组件，显示文本 "Afra55"
          .decoration({
            type: TextDecorationType.LineThrough,
            color: Color.Red,
            style: TextDecorationStyle.DOUBLE
          }) // 设置双删除线装饰，颜色为红色

        Span("|||").fontColor(Color.Orange) // 创建一个 Span 组件，显示文本 "|||"，颜色为橙色

        Span('Afra55')// 创建一个 Span 组件，显示文本 "Afra55"
          .decoration({
            type: TextDecorationType.Overline,
            color: Color.Yellow,
            style: TextDecorationStyle.DOUBLE
          }) // 设置双上划线装饰，颜色为黄色

        Span("\n") // 插入一个换行符

        Span('Afra55')// 创建一个 Span 组件，显示文本 "Afra55"
          .letterSpacing(10)// 设置字符间距为 10
          .fontSize(30) // 设置字体大小为 30

        Span(this.text)// 创建一个 Span 组件，显示状态变量 `text` 的值
          .textCase(TextCase.UpperCase)// 将文本转换为大写
          .fontSize(30)// 设置字体大小为 30
          .fontColor(Color.Pink)// 设置字体颜色为粉色
          .onClick(() => { // 为 Span 组件添加点击事件处理器
            this.text = Math.floor(Math.random() * 100).toString() // 点击时，生成一个 0 到 99 之间的随机整数，并更新 `text` 状态
          })
      }.fontSize(20) // 设置 Text 组件的默认字体大小为 20（注意：这个设置可能会被子组件的字体大小覆盖）
    }
    .height('100%') // 设置 Column 容器的高度为父容器的 100%
    .width('100%') // 设置 Column 容器的宽度为父容器的 100%
  }
}