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

您所在的位置：网站首页 › 鸿蒙界面怎么设置返回键 › 【鸿蒙软件开发】ArkTS常见组件之单选框Radio和切换按钮Toggle

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

2024-05-31 04:22| 来源: 网络整理| 查看: 265

文章目录前言一、Radio单选框1.1 创建单选框1.2 添加Radio事件1.3 场景示例二、切换按钮Toggle2.1 创建切换按钮2.2 创建有子组件的Toggle2.3 自定义样式selectedColor属性switchPointColor属性 2.4 添加事件2.5 示例代码总结

前言

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

一、Radio单选框 1.1 创建单选框

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

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

该接口用于创建一个单选框，其中value是单选框的名称，group是单选框的所属群组名称。checked属性可以设置单选框的状态，状态分别为false和true时，设置为true时表示单选框被选中。Radio仅支持选中和未选中两种样式，不支持自定义颜色和形状。

如果他们在同一个组中，他们就是互斥的。即点击一个，另一个就会取消。

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

在这里插入图片描述

1.2 添加Radio事件

除支持通用事件外，Radio通常用于选中后触发某些操作，可以绑定onChange事件来响应选中操作后的自定义行为。

参数为boolean，即当前的状态

Radio({ value: 'Radio1', group: 'radioGroup' }) .onChange((isChecked: boolean) => { if(isChecked) { //需要执行的操作 } }) Radio({ value: 'Radio2', group: 'radioGroup' }) .onChange((isChecked: boolean) => { if(isChecked) { //需要执行的操作 } })

在这里插入图片描述

1.3 场景示例

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

// xxx.ets import promptAction from '@ohos.promptAction'; @Entry @Component struct RadioExample { build() { Row() { Column() { Radio({ value: 'Radio1', group: 'radioGroup' }).checked(true) .height(50) .width(50) .onChange((isChecked: boolean) => { if(isChecked) { // 切换为响铃模式 promptAction.showToast({ message: 'Ringing mode.' }) } }) Text('Ringing') } Column() { Radio({ value: 'Radio2', group: 'radioGroup' }) .height(50) .width(50) .onChange((isChecked: boolean) => { if(isChecked) { // 切换为振动模式 promptAction.showToast({ message: 'Vibration mode.' }) } }) Text('Vibration') } Column() { Radio({ value: 'Radio3', group: 'radioGroup' }) .height(50) .width(50) .onChange((isChecked: boolean) => { if(isChecked) { // 切换为静音模式 promptAction.showToast({ message: 'Silent mode.' }) } }) Text('Silent') } }.height('100%').width('100%').justifyContent(FlexAlign.Center) } }

在这里插入图片描述

二、切换按钮Toggle 2.1 创建切换按钮

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

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

该接口用于创建切换按钮，其中ToggleType为开关类型，包括Button、Checkbox和Switch，isOn为切换按钮的状态，接口调用有以下两种形式：

创建不包含子组件的Toggle。当ToggleType为Checkbox或者Switch时，用于创建不包含子组件的Toggle：

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

在这里插入图片描述

下图为type两种类型的展示：在这里插入图片描述

其中上为Switch，下为CheckBox

2.2 创建有子组件的Toggle

创建包含子组件的Toggle。当ToggleType为Button时，只能包含一个子组件，如果子组件有文本设置，则相应的文本内容会显示在按钮内部。

要注意：只有type为Button时，才能包含子组件，有且只有一个！！！

Toggle({ type: ToggleType.Button, isOn: false }) { Text('status button') .fontColor('#182431') .fontSize(12) }.width(100) Toggle({ type: ToggleType.Button, isOn: true }) { Text('status button') .fontColor('#182431') .fontSize(12) }.width(100)

在这里插入图片描述

2.3 自定义样式 selectedColor属性

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

示例代码：

Toggle({ type: ToggleType.Button, isOn: true }) { Text('status button') .fontColor('#182431') .fontSize(12) }.width(100).selectedColor(Color.Pink) Toggle({ type: ToggleType.Checkbox, isOn: true }) .selectedColor(Color.Pink) Toggle({ type: ToggleType.Switch, isOn: true }) .selectedColor(Color.Pink)

在这里插入图片描述

switchPointColor属性

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

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

在这里插入图片描述

2.4 添加事件

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

Toggle({ type: ToggleType.Switch, isOn: false }) .onChange((isOn: boolean) => { if(isOn) { // 需要执行的操作 } }) 2.5 示例代码

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

// xxx.ets import promptAction from '@ohos.promptAction'; @Entry @Component struct ToggleExample { build() { Column() { Row() { Text("Bluetooth Mode") .height(50) .fontSize(16) } Row() { Text("Bluetooth") .height(50) .padding({left: 10}) .fontSize(16) .textAlign(TextAlign.Start) .backgroundColor(0xFFFFFF) Toggle({ type: ToggleType.Switch }) .margin({left: 200, right: 10}) .onChange((isOn: boolean) => { if(isOn) { promptAction.showToast({ message: 'Bluetooth is on.' }) } else { promptAction.showToast({ message: 'Bluetooth is off.' }) } }) } .backgroundColor(0xFFFFFF) } .padding(10) .backgroundColor(0xDCDCDC) .width('100%') .height('100%') } } 总结

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

【本文地址】

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

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

今日新闻

推荐新闻