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