【鸿蒙软件开发】ArkTS常见组件之单选框Radio和切换按钮Toggle ...

---

前言

Radio是单选框组件，通常用于提供相应的用户交互选择项，同一组的Radio中只有一个可以被选中。具体用法请参考Radio。
Toggle组件提供状态按钮样式，勾选框样式及开关样式，一般用于两种状态之间的切换。具体用法请参考Toggle。

---

一、Radio单选框

1.1 创建单选框

Radio通过调用接口来创建，接口调用形式如下：

1. Radio(options: {value: string, group: string})

复制代码

该接口用于创建一个单选框，其中value是单选框的名称，group是单选框的所属群组名称。checked属性可以设置单选框的状态，状态分别为false和true时，设置为true时表示单选框被选中。Radio仅支持选中和未选中两种样式，不支持自定义颜色和形状。
如果他们在同一个组中，他们就是互斥的。即点击一个，另一个就会取消。

1. Radio({ value: 'Radio1', group: 'radioGroup' })
2.   .checked(false)
3. Radio({ value: 'Radio2', group: 'radioGroup' })
4.   .checked(true)

复制代码

1.2 添加Radio变乱

除支持通用变乱外，Radio通常用于选中后触发某些操作，可以绑定onChange变乱来响应选中操作后的自定义举动。
参数为boolean，即当前的状态

1.   Radio({ value: 'Radio1', group: 'radioGroup' })
2.     .onChange((isChecked: boolean) => {
3.       if(isChecked) {
4.         //需要执行的操作
5.       }
6.     })
7.   Radio({ value: 'Radio2', group: 'radioGroup' })
8.     .onChange((isChecked: boolean) => {
9.       if(isChecked) {
10.         //需要执行的操作
11.       }
12.     })

复制代码

1.3 场景示例

下面的为鸿蒙软件官方提供的示例，大家可以玩一下，因为有些东西没学，所有只是了解一下：

1. // xxx.ets
2. import promptAction from '@ohos.promptAction';
3. @Entry
4. @Component
5. struct RadioExample {
6.   build() {
7.     Row() {
8.       Column() {
9.         Radio({ value: 'Radio1', group: 'radioGroup' }).checked(true)
10.           .height(50)
11.           .width(50)
12.           .onChange((isChecked: boolean) => {
13.             if(isChecked) {
14.               // 切换为响铃模式
15.               promptAction.showToast({ message: 'Ringing mode.' })
16.             }
17.           })
18.         Text('Ringing')
19.       }
20.       Column() {
21.         Radio({ value: 'Radio2', group: 'radioGroup' })
22.           .height(50)
23.           .width(50)
24.           .onChange((isChecked: boolean) => {
25.             if(isChecked) {
26.               // 切换为振动模式
27.               promptAction.showToast({ message: 'Vibration mode.' })
28.             }
29.           })
30.         Text('Vibration')
31.       }
32.       Column() {
33.         Radio({ value: 'Radio3', group: 'radioGroup' })
34.           .height(50)
35.           .width(50)
36.           .onChange((isChecked: boolean) => {
37.             if(isChecked) {
38.               // 切换为静音模式
39.               promptAction.showToast({ message: 'Silent mode.' })
40.             }
41.           })
42.         Text('Silent')
43.       }
44.     }.height('100%').width('100%').justifyContent(FlexAlign.Center)
45.   }
46. }

复制代码

二、切换按钮Toggle

2.1 创建切换按钮

Toggle通过调用接口来创建，接口调用形式如下：

1. Toggle(options: { type: ToggleType, isOn?: boolean })

复制代码

该接口用于创建切换按钮，其中ToggleType为开关范例，包括Button、Checkbox和Switch，isOn为切换按钮的状态，接口调用有以下两种形式：
创建不包含子组件的Toggle。
当ToggleType为Checkbox大概Switch时，用于创建不包含子组件的Toggle：

1. Toggle({ type: ToggleType.Checkbox, isOn: false })
2. Toggle({ type: ToggleType.Checkbox, isOn: true })

复制代码

下图为type两种范例的展示：

其中上为Switch，下为CheckBox
2.2 创建有子组件的Toggle

创建包含子组件的Toggle。
当ToggleType为Button时，只能包含一个子组件，如果子组件有文本设置，则相应的文本内容会表现在按钮内部。
要留意：只有type为Button时，才气包含子组件，有且只有一个！！！

1. Toggle({ type: ToggleType.Button, isOn: false }) {
2.   Text('status button')
3.   .fontColor('#182431')
4.   .fontSize(12)
5. }.width(100)
6. Toggle({ type: ToggleType.Button, isOn: true }) {
7.   Text('status button')
8.   .fontColor('#182431')
9.   .fontSize(12)
10. }.width(100)

复制代码

2.3 自定义样式

selectedColor属性

其中对于Toggle独特的属性是.selectedColor()，他是当Toggle选中后，所呈现的颜色
示例代码：

1. Toggle({ type: ToggleType.Button, isOn: true }) {
2.   Text('status button')
3.   .fontColor('#182431')
4.   .fontSize(12)
5. }.width(100).selectedColor(Color.Pink)
6. Toggle({ type: ToggleType.Checkbox, isOn: true })
7.   .selectedColor(Color.Pink)
8. Toggle({ type: ToggleType.Switch, isOn: true })
9.   .selectedColor(Color.Pink)

复制代码

switchPointColor属性

通过switchPointColor属性设置Switch范例的圆形滑块颜色，仅对type为ToggleType.Switch见效。

1. Toggle({ type: ToggleType.Switch, isOn: false })
2.   .switchPointColor(Color.Pink)
3. Toggle({ type: ToggleType.Switch, isOn: true })
4.   .switchPointColor(Color.Pink)

复制代码

2.4 添加变乱

除支持通用变乱外，Toggle通常用于选中和取消选中后触发某些操作，可以绑定onChange变乱来响应操作后的自定义举动。

1. Toggle({ type: ToggleType.Switch, isOn: false })
2.   .onChange((isOn: boolean) => {
3.       if(isOn) {
4.         // 需要执行的操作
5.       }
6.   })

复制代码

2.5 示例代码

下面的为鸿蒙软件官方提供的示例，大家可以玩一下，因为有些东西没学，所有只是了解一下：

1. // xxx.ets
2. import promptAction from '@ohos.promptAction';
3. @Entry
4. @Component
5. struct ToggleExample {
6.   build() {
7.     Column() {
8.       Row() {
9.         Text("Bluetooth Mode")
10.         .height(50)
11.         .fontSize(16)
12.       }
13.       Row() {
14.         Text("Bluetooth")
15.           .height(50)
16.           .padding({left: 10})
17.           .fontSize(16)
18.           .textAlign(TextAlign.Start)
19.           .backgroundColor(0xFFFFFF)
20.         Toggle({ type: ToggleType.Switch })
21.           .margin({left: 200, right: 10})
22.           .onChange((isOn: boolean) => {
23.             if(isOn) {
24.               promptAction.showToast({ message: 'Bluetooth is on.' })
25.             } else {
26.               promptAction.showToast({ message: 'Bluetooth is off.' })
27.             }
28.           })
29.       }
30.       .backgroundColor(0xFFFFFF)
31.     }
32.     .padding(10)
33.     .backgroundColor(0xDCDCDC)
34.     .width('100%')
35.     .height('100%')
36.   }
37. }

复制代码

---

总结

以上就是本日要讲的内容，本文介绍了单选框Radio和切换按钮Toggle的使用，使用这些组件可以资助我们快速构建ArkTS的界面

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。