1# 单选框 2 3 4Radio是单选框组件，通常用于提供相应的用户交互选择项，同一组的Radio中只有一个可以被选中。具体用法请参考[Radio](../reference/arkui-ts/ts-basic-components-radio.md)。 5 6 7## 创建单选框 8 9Radio通过调用接口来创建，接口调用形式如下： 10 11 12```ts 13Radio(options: {value: string, group: string}) 14``` 15 16 该接口用于创建一个单选框，其中value是单选框的名称，group是单选框的所属群组名称。checked属性可以设置单选框的状态，状态分别为false和true时，设置为true时表示单选框被选中。Radio仅支持选中和未选中两种样式，不支持自定义颜色和形状。 17 18```ts 19Radio({ value: 'Radio1', group: 'radioGroup' }) 20 .checked(false) 21Radio({ value: 'Radio2', group: 'radioGroup' }) 22 .checked(true) 23``` 24 25 26 27 28 29## 添加事件 30 31除支持[通用事件](../reference/arkui-ts/ts-universal-events-click.md)外，Radio通常用于选中后触发某些操作，可以绑定onChange事件来响应选中操作后的自定义行为。 32 33 34 35```ts 36 Radio({ value: 'Radio1', group: 'radioGroup' }) 37 .onChange((isChecked: boolean) => { 38 if(isChecked) { 39 //需要执行的操作 40 } 41 }) 42 Radio({ value: 'Radio2', group: 'radioGroup' }) 43 .onChange((isChecked: boolean) => { 44 if(isChecked) { 45 //需要执行的操作 46 } 47 }) 48``` 49 50 51## 场景示例 52 53通过点击Radio切换声音模式。 54 55 56```ts 57// xxx.ets 58import promptAction from '@ohos.promptAction'; 59@Entry 60@Component 61struct RadioExample { 62 build() { 63 Row() { 64 Column() { 65 Radio({ value: 'Radio1', group: 'radioGroup' }).checked(true) 66 .height(50) 67 .width(50) 68 .onChange((isChecked: boolean) => { 69 if(isChecked) { 70 // 切换为响铃模式 71 promptAction.showToast({ message: 'Ringing mode.' }) 72 } 73 }) 74 Text('Ringing') 75 } 76 Column() { 77 Radio({ value: 'Radio2', group: 'radioGroup' }) 78 .height(50) 79 .width(50) 80 .onChange((isChecked: boolean) => { 81 if(isChecked) { 82 // 切换为振动模式 83 promptAction.showToast({ message: 'Vibration mode.' }) 84 } 85 }) 86 Text('Vibration') 87 } 88 Column() { 89 Radio({ value: 'Radio3', group: 'radioGroup' }) 90 .height(50) 91 .width(50) 92 .onChange((isChecked: boolean) => { 93 if(isChecked) { 94 // 切换为静音模式 95 promptAction.showToast({ message: 'Silent mode.' }) 96 } 97 }) 98 Text('Silent') 99 } 100 }.height('100%').width('100%').justifyContent(FlexAlign.Center) 101 } 102} 103``` 104 105 106 107
