• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Radio
2
3单选框,提供相应的用户交互选择项。
4
5>  **说明:**
6>
7>  该组件从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
8
9
10## 子组件
11
1213
14
15## 接口
16
17Radio(options: {value: string, group: string})
18
19从API version 9开始,该接口支持在ArkTS卡片中使用。
20
21**参数:**
22
23| 参数名 | 参数类型 | 必填 | 参数描述 |
24| -------- | -------- | -------- | -------- |
25| value | string | 是 | 当前单选框的值。|
26| group | string | 是 | 当前单选框的所属群组名称,相同group的Radio只能有一个被选中。|
27
28## 属性
29
30除支持[通用属性](ts-universal-attributes-size.md)外,还支持以下属性:
31
32| 名称 | 参数类型 | 描述 |
33| -------- | -------- | -------- |
34| checked | boolean | 设置单选框的选中状态。<br/>默认值:false <br/>从API version 9开始,该接口支持在ArkTS卡片中使用。|
35
36## 事件
37
38除支持[通用事件](ts-universal-events-click.md)外,还支持以下事件:
39
40| 名称 | 功能描述 |
41| -------- | -------- |
42| onChange(callback: (isChecked: boolean) => void) | 单选框选中状态改变时触发回调。<br> -&nbsp;isChecked为true时,表示从未选中变为选中。<br> -&nbsp;isChecked为false时,表示从选中变为未选中。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
43
44
45## 示例
46
47```ts
48// xxx.ets
49@Entry
50@Component
51struct RadioExample {
52  build() {
53    Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
54      Column() {
55        Text('Radio1')
56        Radio({ value: 'Radio1', group: 'radioGroup' }).checked(true)
57          .height(50)
58          .width(50)
59          .onChange((isChecked: boolean) => {
60            console.log('Radio1 status is ' + isChecked)
61          })
62      }
63      Column() {
64        Text('Radio2')
65        Radio({ value: 'Radio2', group: 'radioGroup' }).checked(false)
66          .height(50)
67          .width(50)
68          .onChange((isChecked: boolean) => {
69            console.log('Radio2 status is ' + isChecked)
70          })
71      }
72      Column() {
73        Text('Radio3')
74        Radio({ value: 'Radio3', group: 'radioGroup' }).checked(false)
75          .height(50)
76          .width(50)
77          .onChange((isChecked: boolean) => {
78            console.log('Radio3 status is ' + isChecked)
79          })
80      }
81    }.padding({ top: 30 })
82  }
83}
84```
85![](figures/radio.gif)
86