Select 如何实现多选？

Question

Select 如何实现多选？

本文参与了思否 HarmonyOS 技术问答马拉松，欢迎正在阅读的你也加入。

Answer 1

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)
  }
}

本文参与了思否 HarmonyOS 技术问答马拉松，欢迎正在阅读的你也加入。