#我的鸿蒙开发手记# 自学 复选框Toggle（开关/复选框）的实现与定制 原创

一、什么是复选框Toggle（开关/复选框）

在鸿蒙系统（HarmonyOS）开发中，Deveco Studio 是华为官方提供的集成开发环境（IDE），用于开发鸿蒙应用程序。Toggle 组件是鸿蒙 UI 框架中一个常用的交互控件，主要用于实现开关（Switch）或复选框（Checkbox）的功能，允许用户在两种状态（开启/关闭、选中/未选中）之间切换。

二、复选框Toggle（开关/复选框）的基本用法

@Entry
@Component
struct ToggleExample {
  // 状态管理：定义三个不同类型的开关状态
  @State simpleToggle: boolean = false
  @State capsuleToggle: boolean = true
  @State customToggle: boolean = false

  build() {
    Column({ space: 20 }) {
      // 标题文本
      Text('Toggle组件演示')
        .fontSize(24)
        .fontWeight(FontWeight.Bold)
        .margin({ top: 20, bottom: 30 })

      // 基础开关样式
      Row() {
        Text('基础开关:')
          .fontSize(18)
          .margin({ right: 15 })
        Toggle({ type: ToggleType.Switch, isOn: this.simpleToggle })
          .onChange((isOn: boolean) => {
            this.simpleToggle = isOn
            console.log('基础开关状态:', isOn)
          })
      }
      .justifyContent(FlexAlign.Center)
      .width('80%')

      // 胶囊样式复选框
      Row() {
        Text('胶囊复选框:')
          .fontSize(18)
          .margin({ right: 15 })
        Toggle({ 
          type: ToggleType.Checkbox, 
          isOn: this.capsuleToggle 
        })
          .size({ width: 60, height: 30 })
          .selectedColor('#409EFF')
          .switchPointColor('#FFFFFF')
          .onChange((isOn: boolean) => {
            this.capsuleToggle = isOn
            console.log('胶囊复选框状态:', isOn)
          })
      }
      .justifyContent(FlexAlign.Center)
      .width('80%')

      // 完全自定义样式
      Row() {
        Text('自定义样式:')
          .fontSize(18)
          .margin({ right: 15 })
        Toggle({ 
          type: ToggleType.Switch, 
          isOn: this.customToggle 
        })
          .width(80)
          .height(40)
          .selectedColor('#67C23A')
          .backgroundColor('#F0F0F0')
          .switchPointColor('#FFFFFF')
          .text({
            on: 'ON',  // 开启时显示文本
            off: 'OFF' // 关闭时显示文本
          })
          .textFont({
            size: 16,
            weight: FontWeight.Medium
          })
          .textColor({
            on: '#FFFFFF',  // 开启时文字颜色
            off: '#909399'  // 关闭时文字颜色
          })
          .onChange((isOn: boolean) => {
            this.customToggle = isOn
            console.log('自定义开关状态:', isOn)
          })
      }
      .justifyContent(FlexAlign.Center)
      .width('80%')
      .margin({ top: 20 })

      // 状态显示区域
      Text(`当前状态：
      基础开关: ${this.simpleToggle ? '开' : '关'}
      胶囊复选框: ${this.capsuleToggle ? '选中' : '未选'}
      自定义开关: ${this.customToggle ? 'ON' : 'OFF'}`)
        .fontSize(16)
        .margin({ top: 30 })
        .padding(15)
        .backgroundColor('#F8F8F8')
        .borderRadius(8)
        .width('80%')
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#FFFFFF')
    .justifyContent(FlexAlign.Start)
  }
}

代码解析

1. 状态管理

@State simpleToggle: boolean = false // 基础开关状态
@State capsuleToggle: boolean = true // 胶囊复选框状态
@State customToggle: boolean = false // 自定义开关状态

使用 @State 装饰器实现 响应式状态管理

三种状态分别对应不同类型的开关

2. 基础开关实现

Toggle({ type: ToggleType.Switch, isOn: this.simpleToggle })
  .onChange((isOn: boolean) => {
    this.simpleToggle = isOn
  })

ToggleType.Switch：滑动开关样式

onChange：状态变化回调

3. 胶囊复选框实现

Toggle({ 
  type: ToggleType.Checkbox, 
  isOn: this.capsuleToggle 
})
  .size({ width: 60, height: 30 })
  .selectedColor('#409EFF') // 选中时背景色
  .switchPointColor('#FFFFFF') // 滑块颜色

ToggleType.Checkbox：复选框样式

size：自定义尺寸

颜色参数支持十六进制/RGB/颜色常量

4. 深度定制开关

.text({
  on: 'ON',
  off: 'OFF'
})
.textFont({
  size: 16,
  weight: FontWeight.Medium
})
.textColor({
  on: '#FFFFFF',
  off: '#909399'
})

显示自定义文本

分别设置开启/关闭状态的文字颜色

支持动态字体样式

5. 状态反馈

Text(`当前状态：
基础开关: ${this.simpleToggle ? '开' : '关'}
胶囊复选框: ${this.capsuleToggle ? '选中' : '未选'}
自定义开关: ${this.customToggle ? 'ON' : 'OFF'}`)

实时显示所有开关状态

使用模板字符串动态更新内容

三、拓展

1. 添加禁用状态

Toggle({ type: ToggleType.Switch, isOn: false })
  .enabled(false) // 禁用开关
  .selectedColor('#C0C4CC') // 禁用时颜色

2. 组合使用

// 与List组件结合
List() {
  ListItem() {
    Toggle({ type: ToggleType.Checkbox })
      .margin({ right: 10 })
    Text('选项1')
  }
  ListItem() {
    Toggle({ type: ToggleType.Checkbox })
      .margin({ right: 10 })
    Text('选项2')
  }
}

3. 动态样式

// 在config.json中添加设备适配
"deviceTypes": [
  "phone", 
  "tablet",
  "tv"
]

四、结语

通过复选框Toggle（开关/复选框），开发者可以快速构建符合业务场景功能。期待看到更多开发者创造出独具特色的时间选择交互方案！