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