当前位置：首页 > article >正文

「Mac畅玩鸿蒙与硬件14」鸿蒙UI组件篇4 - Toggle 和 Checkbox 组件

article 2024/10/30 12:27:20

在鸿蒙开发中，Toggle 和 Checkbox 是常用的交互组件，分别用于实现开关切换和多项选择。Toggle 提供多种类型以适应不同场景，而 Checkbox 支持自定义样式及事件回调。本篇将详细介绍这两个组件的基本用法，并通过实战展示它们的组合应用。

在这里插入图片描述

关键词

Toggle 组件
Checkbox 组件
开关切换
多选框
事件监听

一、Toggle 组件基础

Toggle 支持三种类型：Switch、Checkbox 和 Button。开发者可根据需求选择适合的类型，并自定义颜色和样式。

1.1 Toggle 类型与基本用法

使用 @State 保存 Toggle 的状态，并通过 onChange 事件监听状态变化：

@Entry
@Component
struct ToggleExample {
   
  @State isActive: boolean = false; // 定义开关状态

  build() {
   
    Column() {
   
      Text(`当前状态：${
     this.isActive ? '开启' : '关闭'}`) // 显示当前状态
        .fontSize(18)
        .margin({
    bottom: 10 })

      Toggle({
   
        type: ToggleType.Switch, // 设置类型为 Switch
        isOn: this.isActive, // 绑定状态
      })
        .selectedColor(Color.Green) // 选中状态颜色
        .switchPointColor(Color.White) // 按钮颜色
        .onChange((value) => this.isActive = value) // 更新状态
    }
    .width('100%')
    .height('100%')
    .alignItems(HorizontalAlign.<