1# Radio 2 3单选框，提供相应的用户交互选择项。 4 5> **说明：** 6> 7> API version 12开始，Radio选中默认样式由RadioIndicatorType.DOT变为RadioIndicatorType.TICK。 8> 9> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 10 11 12## 子组件 13 14无 15 16 17## 接口 18 19Radio(options: RadioOptions) 20 21创建单选框组件。 22 23**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 24 25**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 26 27**系统能力：** SystemCapability.ArkUI.ArkUI.Full 28 29**参数：** 30 31| 参数名 | 类型 | 必填 | 说明 | 32| ------- | ------------------------------------- | ---- | ------------------ | 33| options | [RadioOptions](#radiooptions对象说明) | 是 | 配置单选框的参数。 | 34 35## RadioOptions对象说明 36 37**系统能力：** SystemCapability.ArkUI.ArkUI.Full 38 39| 名称 | 类型 | 必填 | 说明 | 40| -------- | -------- | -------- | -------- | 41| value | string | 是 | 当前单选框的值。 <br/>**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 42| group | string | 是 | 当前单选框的所属群组名称，相同group的Radio只能有一个被选中。<br/>**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 43| indicatorType<sup>12+</sup> | [RadioIndicatorType](#radioindicatortype12枚举说明) | 否 | 配置单选框的选中样式。未设置时按照RadioIndicatorType.TICK进行显示。<br/>**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 44| indicatorBuilder<sup>12+</sup> | [CustomBuilder](ts-types.md#custombuilder8) | 否 | 配置单选框的选中样式为自定义组件。自定义组件与Radio组件为中心点对齐显示。indicatorBuilder设置为undefined时，按照RadioIndicatorType.TICK进行显示。<br/>**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 45 46## RadioIndicatorType<sup>12+</sup>枚举说明 47 48**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 49 50**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 51 52**系统能力：** SystemCapability.ArkUI.ArkUI.Full 53 54| 名称 | 说明 | 55| --------------- | -------------------------------- | 56| TICK | 选中样式为系统默认TICK图标。 | 57| DOT | 选中样式为系统默认DOT图标。 | 58| CUSTOM | 选中样式为indicatorBuilder中的内容。| 59 60## 属性 61 62除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性： 63 64### checked 65 66checked(value: boolean) 67 68设置单选框的选中状态。 69 70从API version 10开始，该属性支持[$$](../../../quick-start/arkts-two-way-sync.md)双向绑定变量。 71 72**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 73 74**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 75 76**系统能力：** SystemCapability.ArkUI.ArkUI.Full 77 78**参数：** 79 80| 参数名 | 类型 | 必填 | 说明 | 81| ------ | ------- | ---- | ------------------------------------ | 82| value | boolean | 是 | 单选框的选中状态。<br/>默认值：false | 83 84### radioStyle<sup>10+</sup> 85 86radioStyle(value?: RadioStyle) 87 88设置单选框选中状态和非选中状态的样式。 89 90从API version 10开始，该接口支持在ArkTS组件中使用。 91 92**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 93 94**系统能力：** SystemCapability.ArkUI.ArkUI.Full 95 96**参数：** 97 98| 参数名 | 类型 | 必填 | 说明 | 99| ------ | ----------------------------------- | ---- | ---------------------------------- | 100| value | [RadioStyle](#radiostyle10对象说明) | 否 | 单选框选中状态和非选中状态的样式。 | 101 102### contentModifier<sup>12+</sup> 103 104contentModifier(modifier: ContentModifier\<RadioConfiguration>) 105 106定制Radio内容区的方法。 107 108**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 109 110**系统能力：** SystemCapability.ArkUI.ArkUI.Full 111 112**参数：** 113 114| 参数名 | 类型 | 必填 | 说明 | 115| ------ | --------------------------------------------- | ---- | ------------------------------------------------ | 116| modifier | [ContentModifier\<RadioConfiguration>](#radioconfiguration12对象说明) | 是 | 在Radio组件上，定制内容区的方法。<br/>modifier: 内容修改器，开发者需要自定义class实现ContentModifier接口。 | 117 118## 事件 119 120除支持[通用事件](ts-universal-events-click.md)外，还支持以下事件： 121 122### onChange 123 124onChange(callback: (isChecked: boolean) => void) 125 126单选框选中状态改变时触发回调。 127 128**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 129 130**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 131 132**系统能力：** SystemCapability.ArkUI.ArkUI.Full 133 134**参数：** 135 136| 参数名 | 类型 | 必填 | 说明 | 137| --------- | ------- | ---- | ------------------------------------------------------------ | 138| isChecked | boolean | 是 | 单选框的状态。<br/>为true时，表示从未选中变为选中。为false时，表示从选中变为未选中。 | 139 140## RadioStyle<sup>10+</sup>对象说明 141 142**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 143 144**系统能力：** SystemCapability.ArkUI.ArkUI.Full 145 146| 名称 | 类型 | 必填 | 说明 | 147| ---------------------- | ------------------------------------------ | ---- | ------------------------------------------------------------ | 148| checkedBackgroundColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 开启状态底板颜色。<br/>默认值：#007DFF | 149| uncheckedBorderColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 关闭状态描边颜色。<br/>默认值：#182431 | 150| indicatorColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 开启状态内部圆饼颜色。从API version 12开始，indicatorType设置为RadioIndicatorType.TICK和RadioIndicatorType.DOT时，支持修改内部颜色。indicatorType设置为RadioIndicatorType.CUSTOM时，不支持修改内部颜色。<br/>默认值：#FFFFFF | 151 152## RadioConfiguration<sup>12+</sup>对象说明 153 154开发者需要自定义class实现ContentModifier接口。 155 156**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 157 158**系统能力：** SystemCapability.ArkUI.ArkUI.Full 159 160| 名称 | 类型 | 只读 | 可选 | 说明 | 161| ------ | ------ |-------------------------------- |-------------------------------- |-------------------------------- | 162| value | string | 否 | 否 |当前单选框的值。 | 163| checked | boolean| 否 | 否 | 设置单选框的选中状态。<br/>默认值：false | 164| triggerChange |Callback\<boolean>|否|否|触发单选框选中状态变化。 | 165 166 167## 示例 168### 示例1 （设置底板颜色） 169该示例通过配置checkedBackgroundColor实现自定义单选框的底板颜色。 170```ts 171// xxx.ets 172@Entry 173@Component 174struct RadioExample { 175 build() { 176 Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) { 177 Column() { 178 Text('Radio1') 179 Radio({ value: 'Radio1', group: 'radioGroup' }).checked(true) 180 .radioStyle({ 181 checkedBackgroundColor: Color.Pink 182 }) 183 .height(50) 184 .width(50) 185 .onChange((isChecked: boolean) => { 186 console.log('Radio1 status is ' + isChecked) 187 }) 188 } 189 Column() { 190 Text('Radio2') 191 Radio({ value: 'Radio2', group: 'radioGroup' }).checked(false) 192 .radioStyle({ 193 checkedBackgroundColor: Color.Pink 194 }) 195 .height(50) 196 .width(50) 197 .onChange((isChecked: boolean) => { 198 console.log('Radio2 status is ' + isChecked) 199 }) 200 } 201 Column() { 202 Text('Radio3') 203 Radio({ value: 'Radio3', group: 'radioGroup' }).checked(false) 204 .radioStyle({ 205 checkedBackgroundColor: Color.Pink 206 }) 207 .height(50) 208 .width(50) 209 .onChange((isChecked: boolean) => { 210 console.log('Radio3 status is ' + isChecked) 211 }) 212 } 213 }.padding({ top: 30 }) 214 } 215} 216``` 217 218### 示例2 （设置选中样式） 219该示例通过配置indicatorType、indicatorBuilder实现自定义选中样式。 220```ts 221// xxx.ets 222@Entry 223@Component 224struct RadioExample { 225 @Builder 226 indicatorBuilder() { 227 Image($r("app.media.star")) 228 } 229 build() { 230 Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) { 231 Column() { 232 Text('Radio1') 233 Radio({ value: 'Radio1', group: 'radioGroup', 234 indicatorType:RadioIndicatorType.TICK 235 }).checked(true) 236 .height(50) 237 .width(80) 238 .onChange((isChecked: boolean) => { 239 console.log('Radio1 status is ' + isChecked) 240 }) 241 } 242 Column() { 243 Text('Radio2') 244 Radio({ value: 'Radio2', group: 'radioGroup', 245 indicatorType:RadioIndicatorType.DOT 246 }).checked(false) 247 .height(50) 248 .width(80) 249 .onChange((isChecked: boolean) => { 250 console.log('Radio2 status is ' + isChecked) 251 }) 252 } 253 Column() { 254 Text('Radio3') 255 Radio({ value: 'Radio3', group: 'radioGroup', 256 indicatorType:RadioIndicatorType.CUSTOM, 257 indicatorBuilder:()=>{this.indicatorBuilder()} 258 }).checked(false) 259 .height(50) 260 .width(80) 261 .onChange((isChecked: boolean) => { 262 console.log('Radio3 status is ' + isChecked) 263 }) 264 } 265 }.padding({ top: 30 }) 266 } 267} 268``` 269 270### 示例3（设置自定义样式） 271该示例通过contentModifier实现自定义单选框样式。 272```ts 273class MyRadioStyle implements ContentModifier<RadioConfiguration> { 274 type: number = 0 275 selectedColor: ResourceColor = Color.Black 276 277 constructor(numberType: number, colorType: ResourceColor) { 278 this.type = numberType 279 this.selectedColor = colorType 280 } 281 282 applyContent(): WrappedBuilder<[RadioConfiguration]> { 283 return wrapBuilder(buildRadio) 284 } 285} 286 287@Builder 288function buildRadio(config: RadioConfiguration) { 289 Row({ space: 30 }) { 290 Circle({ width: 50, height: 50 }) 291 .stroke(Color.Black) 292 .fill(config.checked ? (config.contentModifier as MyRadioStyle).selectedColor : Color.White) 293 Button(config.checked ? "off" : "on") 294 .width(100) 295 .type(config.checked ? (config.contentModifier as MyRadioStyle).type : ButtonType.Normal) 296 .backgroundColor('#2787D9') 297 .onClick(() => { 298 if (config.checked) { 299 config.triggerChange(false) 300 } else { 301 config.triggerChange(true) 302 } 303 }) 304 } 305} 306 307@Entry 308@Component 309struct refreshExample { 310 build() { 311 Column({ space: 50 }) { 312 Row() { 313 Radio({ value: 'Radio1', group: 'radioGroup' }) 314 .contentModifier(new MyRadioStyle(1, '#004AAF')) 315 .checked(false) 316 .width(300) 317 .height(100) 318 } 319 320 Row() { 321 Radio({ value: 'Radio2', group: 'radioGroup' }) 322 .checked(true) 323 .width(300) 324 .height(60) 325 .contentModifier(new MyRadioStyle(2, '#004AAF')) 326 } 327 } 328 } 329} 330``` 331
