HarmonyOS鸿蒙学习笔记（7）实现复选框功能CheckBox和Toggle的简单使用

HarmonyOS提供了两个组件可以实现复选框的功能：Checkbox和Toggle

@Entry
@Component
struct CheckBoxPage {
  build() {
    Column() {
      Row(){
        Checkbox({name: 'checkbox1',  group: 'checkboxGroup'})
          .select(true)//默认选中
          .selectedColor(Color.Red)//选中颜色
          .onChange((value: boolean) => {
            console.info('Checkbox1 change is'+ value)
          })
        Text("Checkbox效果").fontSize(25).fontColor(Color.Red)
      }
      Row(){
        Toggle({ type: ToggleType.Checkbox, isOn: true })
          .selectedColor(Color.Blue)
          .onChange((isOn: boolean) => {
            console.info('Component status:' + isOn)
          })
        Text("Toggle 效果").fontSize(25).fontColor(Color.Blue)
      }

    }
    .margin({left:30})
    .height('100%')
    .width('100%')
    .alignItems(HorizontalAlign.Start)
    .justifyContent(FlexAlign.Center)
  }
}

UI效果如下图：

从效果来看Checkbox和Toggle的区别不大，只不过Checkbox可以结合CheckboxGroup组件实现全选效果，如下图： 而Toggle功能比较丰富，可以实现Checkbox,Button,和Switch效果，如下图所示： 参考资料： 1、Checkbox官方说明 2、Toggle官方说明 3、CheckboxGroup官方说明