3.2、HarmonyOS Next 单选框(Radio)

36 阅读1分钟

Radio是单选框组件,通常用于提供相应的用户交互选择项,同一组的Radio中只有一个可以被选中。

创建单选框

该接口用于创建一个单选框,其中 value 是单选框的名称,group 是单选框的所属群组名称。checked 属性可以设置单选框的状态,状态分别为 falsetrue 时,设置为 true 时表示单选框被选中。Radio 仅支持选中和未选中两种样式,不支持自定义颜色和形状。 在这里插入图片描述

Radio({ value: 'Radio1', group: 'radioGroup' })
  .checked(false)
  
Radio({ value: 'Radio2', group: 'radioGroup' })
  .checked(true)

添加事件

除支持通用事件外,Radio 通常用于选中后触发某些操作,可以绑定 onChange 事件来响应选中操作后的自定义行为。 在这里插入图片描述 选择第一项 在这里插入图片描述 选择第二项 在这里插入图片描述

对应代码

Text(`当前选中 ${this.currentSelect}`)
Radio({ value: 'Radio1', group: 'radioGroup2' })
  .onChange((isChecked: boolean) => {
    if (isChecked) {
      //需要执行的操作
      this.currentSelect = 'Radio1'
    }
  })

Radio({ value: 'Radio2', group: 'radioGroup2' })
  .onChange((isChecked: boolean) => {
    if (isChecked) {
      //需要执行的操作
      this.currentSelect = 'Radio2'
    }
})

上一篇 3.1、按钮 Button 下一篇 3.3、切换按钮(Toggle)