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

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%')
  }
}
相关推荐
zhanshuo17 分钟前
构建可扩展的状态系统:基于 ArkTS 的模块化状态管理设计与实现
harmonyos
zhanshuo22 分钟前
ArkTS 模块通信全解析:用事件总线实现页面消息联动
harmonyos
codefish7985 小时前
鸿蒙开发学习之路:从入门到实践的全面指南
harmonyos
yrjw11 小时前
一款基于react-native harmonyOS 封装的【文档】文件预览查看开源库(基于Harmony 原生文件预览服务进行封装)
harmonyos
搜狐技术产品小编20231 天前
搜狐新闻直播间适配HarmonyOs实现点赞动画
华为·harmonyos
zhanshuo1 天前
ArkUI 玩转水平滑动视图:超全实战教程与项目应用解析
harmonyos·arkui
zhanshuo1 天前
ArkUI Canvas 实战:快速绘制柱状图图表组件
harmonyos·arkui
zhanshuo2 天前
手把手教你用 ArkUI 写出高性能分页列表:List + onScroll 实战解析
harmonyos
zhanshuo2 天前
深入解析 ArkUI 触摸事件机制:从点击到滑动的开发全流程
harmonyos
i仙银2 天前
鸿蒙沙箱浏览器 - SandboxFinder
app·harmonyos