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

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

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