• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# 单选框 (Radio)
2<!--Kit: ArkUI-->
3<!--Subsystem: ArkUI-->
4<!--Owner: @houguobiao-->
5<!--Designer: @houguobiao-->
6<!--Tester: @lxl007-->
7<!--Adviser: @HelloCrease-->
8
9
10Radio是单选框组件，通常用于提供相应的用户交互选择项，同一组的Radio中只有一个可以被选中。具体用法请参考[Radio](../reference/apis-arkui/arkui-ts/ts-basic-components-radio.md)。
11
12
13## 创建单选框
14
15Radio通过调用[RadioOptions](../reference/apis-arkui/arkui-ts/ts-basic-components-radio.md#radiooptions对象说明)来创建，以RadioOptions中的value和group为例：
16
17
18```ts
19Radio(options: {value: string, group: string})
20```
21
22其中，value是单选框的名称，group是单选框的所属群组名称。checked属性可以设置单选框的状态，状态分别为false和true，设置为true时表示单选框被选中。
23
24Radio支持设置选中状态和非选中状态的样式。
25
26```ts
27Radio({ value: 'Radio1', group: 'radioGroup' })
28  .checked(false)
29Radio({ value: 'Radio2', group: 'radioGroup' })
30  .checked(true)
31```
32
33
34![zh-cn_image_0000001562820821](figures/zh-cn_image_0000001562820821.png)
35
36
37## 添加事件
38
39除支持[通用事件](../reference/apis-arkui/arkui-ts/ts-component-general-events.md)外，Radio还用于选中后触发某些操作，可以绑定onChange事件来响应选中操作后的自定义行为。
40
41```ts
42  Radio({ value: 'Radio1', group: 'radioGroup' })
43    .onChange((isChecked: boolean) => {
44      if(isChecked) {
45        //需要执行的操作
46      }
47    })
48  Radio({ value: 'Radio2', group: 'radioGroup' })
49    .onChange((isChecked: boolean) => {
50      if(isChecked) {
51        //需要执行的操作
52      }
53    })
54```
55
56
57## 场景示例
58
59通过点击Radio切换声音模式。
60
61
62```ts
63// xxx.ets
64import { promptAction } from '@kit.ArkUI';
65
66@Entry
67@Component
68struct RadioExample {
69  @State Rst: promptAction.ShowToastOptions = { 'message': 'Ringing mode.' };
70  @State Vst: promptAction.ShowToastOptions = { 'message': 'Vibration mode.' };
71  @State Sst: promptAction.ShowToastOptions = { 'message': 'Silent mode.' };
72
73  build() {
74    Row() {
75      Column() {
76        Radio({ value: 'Radio1', group: 'radioGroup' }).checked(true)
77          .height(50)
78          .width(50)
79          .onChange((isChecked: boolean) => {
80            if (isChecked) {
81              // 切换为响铃模式
82              this.getUIContext().getPromptAction().showToast(this.Rst);
83            }
84          })
85        Text('Ringing')
86      }
87
88      Column() {
89        Radio({ value: 'Radio2', group: 'radioGroup' })
90          .height(50)
91          .width(50)
92          .onChange((isChecked: boolean) => {
93            if (isChecked) {
94              // 切换为振动模式
95              this.getUIContext().getPromptAction().showToast(this.Vst);
96            }
97          })
98        Text('Vibration')
99      }
100
101      Column() {
102        Radio({ value: 'Radio3', group: 'radioGroup' })
103          .height(50)
104          .width(50)
105          .onChange((isChecked: boolean) => {
106            if (isChecked) {
107              // 切换为静音模式
108              this.getUIContext().getPromptAction().showToast(this.Sst);
109            }
110          })
111        Text('Silent')
112      }
113    }.height('100%').width('100%').justifyContent(FlexAlign.Center)
114  }
115}
116```
117
118
119![zh-cn_image_0000001562700457](figures/zh-cn_image_0000001562700457.gif)
120