Toggle组件的详解（chekbox，button，switch）及应用 原创

Toggle组件解释

Toggle组件是一个交互式UI组件，用于切换两种状态之间的选择或开关。它通常用于表示开关按钮，例如在设置中启用或禁用某些选项。
在Toggle组件中，用户可以点击按钮来切换状态，或者使用键盘或其他输入设备上的快捷键。通常，Toggle组件会在用户点击或切换状态时触发一个事件，以便应用程序可以响应此更改。

Toggle组件通常包含以下属性：

type：表示当前Toggle组件类型。
isOn：表示当前Toggle组件选中的状态。
onChange：在Toggle组件状态改变时触发的事件处理函数。

创建切换按钮

Button

语法

Toggle({ type: ToggleType.Button, isOn: true } 

ToggleType为Button时，只能包含一个子组件，如果子组件有文本设置，则相应的文本内容会显示在按钮内部。
这个button简单下面给出一个简单的示例。

      Toggle({ type: ToggleType.Button, isOn: false }) {
        Text('按钮')
          .fontColor($r('sys.color.black'))
          .fontSize(12)
      }
      .width(100)
      .selectedColor(Color.Blue)

结果

我们常用的按钮就之间使用Button组件了，这个就不过多介绍了

当ToggleType为Checkbox或者Switch时，用于创建不包含子组件的Toggle

switch

语法

Toggle({ type: ToggleType.Switch, isOn: true } 

switch其他常用的属性有

1. switchPointColor
   设置Switch类型的圆形滑块颜色
   switchPointColor(color: ResourceColor)
2. switchStyle
   设置Switch类型的样式。
   switchStyle(value: SwitchStyle)
   SwitchStyle对象有这些（来自官方文档）
   

下面给出我在开发中画的开关

      Toggle({ type: ToggleType.Switch, isOn: true })
        .width(41)
        .height(21)
        .switchStyle({
          unselectedColor: '#FFFFFF',
          pointRadius: 9
        })
        .switchPointColor('#333333')
        .selectedColor('#E9FAFF')
        .borderRadius(25)
        .border({ color: '#333333', width: 1 })
        .margin({ right: 25 })

        .onChange(() => {
          //深色模式切换
        });

如图所示

checkbox

语法

Toggle({ type: ToggleType.Checkbox, isOn: true } 

示例代码

    Toggle({ type: ToggleType.Checkbox, isOn: true })
      .size({ width: 20, height: 20 })
      .selectedColor('#007DFF')
      .onChange((isOn: boolean) => {
        console.info('Component status:' + isOn)
      })

如图所示

在这个toggle里面，默认的checkbox是圆形的，好像不能改。如果要用其他样式的可以直接使用chekbox组件来设置。
使用checkbox组件设置复选框

      Checkbox()
        .width(17)
        .height(15)
        .shape(CheckBoxShape.ROUNDED_SQUARE)
        .select(false)
        .mark({ strokeColor: '#BEFF33' })
        .selectedColor($r('sys.color.black'))
        .borderRadius(6)

结束。