【鸿蒙开发】第14课，Toggle、SymbolGlyph组件

Afra552025-03-23 18:52

1 Toggle组件

在鸿蒙应用开发中，Toggle组件作为核心交互控件，广泛应用于开关设置、状态切换等场景。

typescript 复制代码

@Entry
@Component
struct ToggleDemo {
  @State toggleState: boolean = false

  build() {
    Column() {
      Toggle({ type: ToggleType.Checkbox, isOn: this.toggleState })
        .onChange((isOn) => {
          this.toggleState = isOn
        })
        .margin(10)

      Toggle({ type: ToggleType.Switch, isOn: this.toggleState })
        .onChange((isOn) => {
          this.toggleState = isOn
        })
        .margin(10)

      Toggle({ type: ToggleType.Switch, isOn: this.toggleState })
        .onChange((isOn) => {
          this.toggleState = isOn
        })
        .switchPointColor(Color.Green)
        .selectedColor(Color.Yellow)
        .margin(10)

      Toggle({ type: ToggleType.Button, isOn: this.toggleState })
        .onChange((isOn) => {
          this.toggleState = isOn
        })
        .size({ width: 40, height: 40 })
        .selectedColor(Color.Red)
        .backgroundColor(Color.Orange)
        .margin(10)

      Text(`当前状态：${this.toggleState ? '开启' : '关闭'}`)
    }.width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

2 SymbolGlyph

SymbolGlyph组件是显示图标小符号的组件。

typescript 复制代码

// 声明组件入口和组件类型
@Entry
@Component
struct SymbolGlyphDemo {
  // 组件构建方法，定义UI结构
  build() {
    // 创建垂直布局容器，设置宽高为100%
    Column() {
      // 添加系统WiFi图标，设置字体大小为30
      SymbolGlyph($r('sys.symbol.ohos_wifi')).fontSize(30)

      // 添加带加号文件夹图标，设置：
      // - 字体大小70
      // - 多色渲染策略
      // - 三种颜色渐变（绿、红、橙）
      SymbolGlyph($r('sys.symbol.ohos_folder_badge_plus'))
        .fontSize(70)
        .renderingStrategy(SymbolRenderingStrategy.MULTIPLE_COLOR)
        .fontColor([Color.Green, Color.Red, Color.Orange])

      // 添加相同文件夹图标，设置：
      // - 字体大小70
      // - 多透明度渲染策略
      // - 三种颜色透明度渐变
      SymbolGlyph($r('sys.symbol.ohos_folder_badge_plus'))
        .fontSize(70)
        .renderingStrategy(SymbolRenderingStrategy.MULTIPLE_OPACITY)
        .fontColor([Color.Green, Color.Red, Color.Orange])

      // 添加WiFi图标，设置：
      // - 特效策略1（可能是渐变/动态效果）
      // - 超大字体97
      SymbolGlyph($r('sys.symbol.ohos_wifi')).effectStrategy(1).fontSize(97)

      // 添加WiFi图标，设置：
      // - 特效策略2（可能是另一种动态效果）
      // - 超大字体97
      SymbolGlyph($r('sys.symbol.ohos_wifi')).effectStrategy(2).fontSize(97)
    }
    // 设置容器宽度为100%
    .width('100%')
    // 设置容器高度为100%
    .height('100%')
  }
}