Radio

单选框，提供相应的用户交互选择项。

declare interface RadioOptions {
  /**
   * Radio group name.
   * @since 8
   */
  group: string;
​
  /**
   * Radio name.
   * @since 8
   */
  value: string;
}

参数:

• value:指当前单选框的值。必填

• g'roup：指当前单选框的所属群组名称，相同group的Radio只能有一个被选中。必填。

属性

• checked： 设置单选框的选中状态，默认值：false

事件

• onChange：单选框选中状态改变时触发回调。

  • isChecked为true时，代表选中。

  • isChecked为false时，代表未选中。

onChange(callback: (isChecked: boolean) => void): RadioAttribute;

示例

// xxx.ets
@Entry
@Component
struct RadioExample {
  build() {
    Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
      Column() {
        Text('Radio1')
        Radio({ value: 'Radio1', group: 'radioGroup' }).checked(true)
          .height(50)
          .width(50)
          .onChange((isChecked: boolean) => {
            console.log('Radio1 status is ' + isChecked)
          })
      }
      Column() {
        Text('Radio2')
        Radio({ value: 'Radio2', group: 'radioGroup' }).checked(false)
          .height(50)
          .width(50)
          .onChange((isChecked: boolean) => {
            console.log('Radio2 status is ' + isChecked)
          })
      }
      Column() {
        Text('Radio3')
        Radio({ value: 'Radio3', group: 'radioGroup' }).checked(false)
          .height(50)
          .width(50)
          .onChange((isChecked: boolean) => {
            console.log('Radio3 status is ' + isChecked)
          })
      }
    }.padding({ top: 30 })
  }
}