1# Radio 2 3单选框，提供相应的用户交互选择项。 4 5> **说明：** 6> 7> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9 10## 子组件 11 12无 13 14 15## 接口 16 17Radio(options: {value: string, group: string}) 18 19从API version 9开始，该接口支持在ArkTS卡片中使用。 20 21**参数:** 22 23| 参数名 | 参数类型 | 必填 | 参数描述 | 24| -------- | -------- | -------- | -------- | 25| value | string | 是 | 当前单选框的值。| 26| group | string | 是 | 当前单选框的所属群组名称，相同group的Radio只能有一个被选中。| 27 28## 属性 29 30除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性： 31 32| 名称 | 参数类型 | 描述 | 33| -------- | -------- | -------- | 34| checked | boolean | 设置单选框的选中状态。<br/>默认值：false <br/>从API version 9开始，该接口支持在ArkTS卡片中使用。<br />从API version 10开始，该属性支持[$$](../../quick-start/arkts-two-way-sync.md)双向绑定变量。 | 35| radioStyle<sup>10+</sup> | [RadioStyle](#radiostyle对象说明) | 设置单选框选中状态和非选中状态的样式。 <br/>从API version 10开始，该接口支持在ArkTS组件中使用。| 36 37## 事件 38 39除支持[通用事件](ts-universal-events-click.md)外，还支持以下事件： 40 41| 名称 | 功能描述 | 42| -------- | -------- | 43| onChange(callback: (isChecked: boolean) => void) | 单选框选中状态改变时触发回调。<br> - isChecked为true时，表示从未选中变为选中。<br> - isChecked为false时，表示从选中变为未选中。<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 | 44 45## RadioStyle对象说明 46 47| 名称 | 类型 | 必填 | 默认值 | 描述 | 48| ---------------------- | ------------------------------------------ | ---- | ------- | ---------------------- | 49| checkedBackgroundColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | #007DFF | 开启状态底板颜色。 | 50| uncheckedBorderColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | #182431 | 关闭状态描边颜色。 | 51| indicatorColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | #FFFFFF | 开启状态内部圆饼颜色。 | 52 53## 示例 54 55```ts 56// xxx.ets 57@Entry 58@Component 59struct RadioExample { 60 build() { 61 Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) { 62 Column() { 63 Text('Radio1') 64 Radio({ value: 'Radio1', group: 'radioGroup' }).checked(true) 65 .radioStyle({ 66 checkedBackgroundColor: Color.Pink 67 }) 68 .height(50) 69 .width(50) 70 .onChange((isChecked: boolean) => { 71 console.log('Radio1 status is ' + isChecked) 72 }) 73 } 74 Column() { 75 Text('Radio2') 76 Radio({ value: 'Radio2', group: 'radioGroup' }).checked(false) 77 .radioStyle({ 78 checkedBackgroundColor: Color.Pink 79 }) 80 .height(50) 81 .width(50) 82 .onChange((isChecked: boolean) => { 83 console.log('Radio2 status is ' + isChecked) 84 }) 85 } 86 Column() { 87 Text('Radio3') 88 Radio({ value: 'Radio3', group: 'radioGroup' }).checked(false) 89 .radioStyle({ 90 checkedBackgroundColor: Color.Pink 91 }) 92 .height(50) 93 .width(50) 94 .onChange((isChecked: boolean) => { 95 console.log('Radio3 status is ' + isChecked) 96 }) 97 } 98 }.padding({ top: 30 }) 99 } 100} 101``` 102 103
