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