HarmonyOS提供了两个组件可以实现复选框的功能:CheckboxToggle

@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效果如下图:
在这里插入图片描述

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

Logo

讨论HarmonyOS开发技术,专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐