鸿蒙：用Toggle组件实现选择框、开关样式

1、前言

在鸿蒙app开发过程中，我们经常会遇到让用户勾选选项、打开开关等操作。那么用Toggle组件就可以实现这些功能。

2、参考文档

https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-togglehttps://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-toggle

3、核心代码

复制代码

 // 创建开关类型的Toggle组件
      // type: ToggleType.Switch 表示是开关样式
      // isOn: $$this.isOn 表示双向绑定isOn状态，开关操作会同步更新isOn的值
      Toggle({ type: ToggleType.Switch, isOn: $$this.isOn })
        .selectedColor('#007DFF')    // 设置开关选中时的颜色（蓝色）
        .switchPointColor('#FFFFFF') // 设置开关滑块的颜色（白色）


      // 创建复选框类型的Toggle组件
      // type: ToggleType.Checkbox 表示是复选框样式
      // 同样双向绑定isOn状态，与开关组件共享同一状态
      Toggle({ type: ToggleType.Checkbox, isOn: $$this.isOn })
        .selectedColor('#007DFF')    // 设置复选框选中时的颜色（蓝色）
        .switchPointColor('#FFFFFF') // 设置复选框内部图标的颜色（白色）

4、运行效果

5、完整代码

复制代码

@Entry
@ComponentV2
struct Index {
  // @Local 装饰器声明这是一个组件内部状态变量，用于管理组件的UI状态
  // isOn 表示开关状态，true为打开，false为关闭，初始值为true
  @Local isOn: boolean = true;

  // @Builder 装饰器声明这是一个UI构建函数，用于封装可复用的UI片段
  // 作用：根据isOn状态显示"打开"或"关闭"文本
  @Builder
  toggleBuilder() {
    Text(this.isOn ? '打开' : '关闭')  // 三元表达式：根据isOn状态切换显示文本
      .fontSize(24)                     // 设置字体大小为24
      .fontWeight(FontWeight.Bold) // 设置字体为粗体
  }

  // build方法是组件的UI构建入口，用于定义组件的布局和内容
  build() {
    // Column为垂直布局容器，{ space: 20 }表示子组件之间的垂直间距为20
    Column({ space: 20 }) {
      // 调用toggleBuilder构建函数，显示当前状态文本（上方）
      this.toggleBuilder()

      // 创建开关类型的Toggle组件
      // type: ToggleType.Switch 表示是开关样式
      // isOn: $$this.isOn 表示双向绑定isOn状态，开关操作会同步更新isOn的值
      Toggle({ type: ToggleType.Switch, isOn: $$this.isOn })
        .selectedColor('#007DFF')    // 设置开关选中时的颜色（蓝色）
        .switchPointColor('#FFFFFF') // 设置开关滑块的颜色（白色）

      // 再次调用toggleBuilder构建函数，显示当前状态文本（下方）
      this.toggleBuilder()

      // 创建复选框类型的Toggle组件
      // type: ToggleType.Checkbox 表示是复选框样式
      // 同样双向绑定isOn状态，与开关组件共享同一状态
      Toggle({ type: ToggleType.Checkbox, isOn: $$this.isOn })
        .selectedColor('#007DFF')    // 设置复选框选中时的颜色（蓝色）
        .switchPointColor('#FFFFFF') // 设置复选框内部图标的颜色（白色）

    }
    .width('100%') // 设置Column宽度为100%父容器宽度
    .height('100%') // 设置Column高度为100%父容器高度
    .justifyContent(FlexAlign.Center) // 设置子组件在垂直方向居中对齐
  }
}

觉得有帮助，可以点赞或收藏