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

Posted 2022-09-10 郭梧悠

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官方说明