鸿蒙 Next 选择按钮 Toggle、Checkbox、Radio 介绍
作者：auhgnixgnahz
- 2025-06-25 北京
本文字数：4919 字
阅读完需：约 16 分钟
本文介绍一下常用的选择开关、单选、多选按钮使用。
效果演示：
Toggle
ToggleType 提供勾选框样式(Checkbox)、状态按钮样式(Button)和开关样式(Switch)
仅当 ToggleType 设置为 Button 时，可包含子组件。
仅当 ToggleType 设置为 Switch 时，可设置 Switch 类型的圆形滑块颜色(switchPointColor)和设置 Switch 类型的样式(switchStyle)。
独立组件，相互不受影响，适合用于单独功能的开关控制或选择。
####Checkbox
Checkbox(options?: CheckboxOptions)提供了配置参数，可以配合 CheckboxGroup 实现分组，完成全选的功能。如果不使用分组，可以不配置。其中 indicatorBuilder 属性可以配置多选框的选中样式为自定义组件。
Checkbox 相当于 Toggle 的勾选框样式(Checkbox)提供了更多的配置属性
可以设置非选中状态的边框颜色(unselectedColor)
设置多选框内部图标的样式(mark)，默认选中对勾的，颜色、大小、粗细
设置 CheckBox 组件形状，包括圆形和圆角方形
CheckboxGroup
用于控制多选框全选或者不全选状态。
CheckboxGroup(options?: CheckboxGroupOptions)配置群组名称 group，结合 Checkbox 设置的 group,会将相同 group 的 Checkbox 分为一组，统一管理。
CheckboxGroup 的 onChange(callback: OnCheckboxGroupChangeCallback)会在 CheckboxGroup 的选中状态或群组内的 Checkbox 的选中状态发生变化时，触发回调。
返回当前群组选中状态：全选、全未选、部分选中，和选中的 Checkbox 的 name
Radio
Radio 和 Checkbox 配置类似，也可以配置群组， 但是他的群组内只能单选。
并且如果只使用一个 Radio 时，如果选中，是不支持自己取消选中的。
Radio 为啥不能反选呢？ 可以看一下 Radio 的源码：点击事件只能从未选中变为选中。
//gitee.com/openharmony/arkui_ace_engine/blob/master/frameworks/core//render_radio.cppvoid RenderRadio::HandleClick(){ if (!checked_) { isClicked_ = true; if (groupValueChangedListener_) { LOGE("groupValueChangedListener_"); groupValueChangedListener_(radioValue_); } } UpdateAnimation(true); onController_->Play();
if (clickEvent_) { clickEvent_(); } if (onClick_) { onClick_(); } if (onChange_) { onChange_(checked_); }}
复制代码
当使用单选或者多选时,Radio 和 Checkbox 的 name 属性是可以重复的，可以将 name 设置成属性的 id，方便提交。
演示源码：
import { CircleShape } from '@kit.ArkUI'@Extend(Text)function textStyle(isOn: boolean) { .fontColor(isOn ? Color.Red : Color.Black).fontSize(26)}@Extend(Radio)function myRadioStyle() { .checked(false) .radioStyle({ checkedBackgroundColor: Color.Green, //开启状态底板颜色 uncheckedBorderColor:Color.Red, //关闭状态描边颜色 indicatorColor:Color.Yellow //开启状态内部圆饼颜色 }) .height(50) .width(50)}
@Entry@ComponentV2struct CheckButtonTest { @Local checkBoxIsOn: boolean = false @Local buttonIsOn: boolean = false @Local switchIsOn: boolean = false @Local checkSelectName: Array<string> =[] @Local radioSelectName: string=''
//CheckBox 自定义多选框的选中样式 @Builder indicatorBuilder(size:number) { Image($r('app.media.reba')).clipShape(new CircleShape({ width: size, height: size })) }
build() { Column({space:10}) { Text('Toggle单选组件').fontSize(30) Row() { Text('Checkbox单选框样式') Toggle({ type: ToggleType.Checkbox, isOn: this.checkBoxIsOn }) .selectedColor('#007DFF') //打开状态下的背景颜色 .onChange((isOn: boolean) => { this.checkBoxIsOn = isOn }) Text(this.checkBoxIsOn ?'是' : '否').textStyle(this.checkBoxIsOn) }.width('100%').justifyContent(FlexAlign.SpaceBetween) Row() { Text('Button状态按钮样式') Toggle({ type: ToggleType.Button, isOn: this.buttonIsOn }){ Text('button').fontColor(this.buttonIsOn?Color.Black:Color.Gray).fontSize(12) } .selectedColor('#007DFF') //打开状态下的背景颜色 .onChange((isOn: boolean) => { this.buttonIsOn = isOn }) Text(this.buttonIsOn ? '是' : '否').textStyle(this.buttonIsOn) }.width('100%').justifyContent(FlexAlign.SpaceBetween) Row() { Text('Switch状态按钮样式') Toggle({ type: ToggleType.Switch, isOn: this.switchIsOn }) .selectedColor('#007DFF') //打开状态下的背景颜色 .switchPointColor('#FFFFFF') //圆形滑块颜色 .onChange((isOn: boolean) => { this.switchIsOn = isOn }) Text(this.switchIsOn ? '是' : '否').textStyle(this.switchIsOn) }.width('100%').justifyContent(FlexAlign.SpaceBetween)
Row({space:30}){ Text('修改Switch样式') Toggle({ type: ToggleType.Switch, isOn: false }).width(60).height(15) .selectedColor(Color.Blue) //打开状态下的背景颜色 .switchPointColor(Color.Green) //圆形滑块颜色 .switchStyle({ pointRadius: 15, //圆形滑块半径 trackBorderRadius: 8, //滑轨的圆角 pointColor: Color.Yellow, //圆形滑块颜色 switchPointColor不生效 unselectedColor: Color.Gray //关闭状态的背景颜色 }) .onChange((isOn: boolean) => { })
Toggle({ type: ToggleType.Switch, isOn: false }).width(71).height(30) .selectedColor(Color.Blue) //打开状态下的背景颜色 .switchStyle({ pointRadius: -1, //圆形滑块半径 小于0时按照默认算法设置 trackBorderRadius: -1, //滑轨的圆角 pointColor: Color.Yellow, //圆形滑块颜色 switchPointColor不生效 unselectedColor: Color.Gray //关闭状态的背景颜色 }) .onChange((isOn: boolean) => { }) } Text('Checkbox多选组件').fontSize(30) Row(){ Checkbox() .select(false) .selectedColor(Color.Blue) //多选框选中状态颜色 .unselectedColor(Color.Red) .mark({ //多选框内部图标的样式 strokeColor:Color.Yellow, //内部图标颜色 size: 50, //内部图标大小 strokeWidth: 5 //内部图标粗细 }) .shape(CheckBoxShape.ROUNDED_SQUARE) //CheckBox组件形状 .onChange((value: boolean) => {
})
.width(50) .height(50)
Checkbox() .select(false) .selectedColor(Color.Blue) //多选框选中状态颜色 .unselectedColor(Color.Gray) .mark({ //多选框内部图标的样式 strokeColor:Color.Green, //内部图标颜色 size: 30, //内部图标大小 strokeWidth: 2 //内部图标粗细 }) .shape(CheckBoxShape.CIRCLE) .width(50) .height(50)
Checkbox({ name: '', group: '', //不使用CheckboxGroup 这两个参数可以不设置 indicatorBuilder:()=>{this.indicatorBuilder(50)} }) .select(false) .selectedColor(Color.Blue) //多选框选中状态颜色 .unselectedColor(Color.Gray) .shape(CheckBoxShape.CIRCLE) .width(50) .height(50) } Text('CheckboxGroup多选群组').fontSize(30)
Text(this.checkSelectName.length>0?'选中'+this.checkSelectName.toString():'未选中') Row(){ CheckboxGroup({ group: 'g1' }) .checkboxShape(CheckBoxShape.ROUNDED_SQUARE) .selectedColor(Color.Green) .unselectedColor(Color.Gray) .onChange((itemName: CheckboxGroupResult) => { this.checkSelectName=[] this.checkSelectName=itemName.name
//itemName.statust 选中状态 //All 群组多选择框全部选择。 //Part 群组多选择框部分选择。 //None 群组多选择框全部没有选择。 }) .mark({ strokeColor:Color.Black, size: 40, strokeWidth: 5 }) .width(50) .height(50) Checkbox({ name: 'cb1', group: 'g1', indicatorBuilder:()=>{this.indicatorBuilder(50)} }) .select(false) .selectedColor(Color.Blue) .unselectedColor(Color.Gray) .shape(CheckBoxShape.CIRCLE) .width(50) .height(50) Checkbox({ name: 'cb2', group: 'g1', indicatorBuilder:()=>{this.indicatorBuilder(50)} }) .select(false) .selectedColor(Color.Blue) .unselectedColor(Color.Gray) .shape(CheckBoxShape.CIRCLE) .width(50) .height(50) Checkbox({ name: 'cb3', group: 'g1', indicatorBuilder:()=>{this.indicatorBuilder(50)} }) .select(false) .selectedColor(Color.Blue) .unselectedColor(Color.Gray) .shape(CheckBoxShape.CIRCLE) .width(50) .height(50) Checkbox({ name: 'cb3', group: 'g1', }) .select(true) .selectedColor(Color.Blue) //多选框选中状态颜色 .unselectedColor(Color.Gray) .mark({ //多选框内部图标的样式 strokeColor:Color.Green, //内部图标颜色 size: 30, //内部图标大小 strokeWidth: 2 //内部图标粗细 }) .shape(CheckBoxShape.CIRCLE) .width(50) .height(50) } Text('Radio单选框').fontSize(30) Text('Radio选中:'+this.radioSelectName) Row({space:10}){ Radio({ value: 'Radio1', group: 'radioGroup' }) .myRadioStyle() .onChange((isChecked: boolean) => { if(isChecked)this.radioSelectName='Radio1' }) Radio({ value: 'Radio2', group: 'radioGroup' }) .myRadioStyle() .onChange((isChecked: boolean) => { if(isChecked)this.radioSelectName='Radio2' }) Radio({ value: 'Radio3', group: 'radioGroup' }) .myRadioStyle() .onChange((isChecked: boolean) => { if(isChecked)this.radioSelectName='Radio3' }) Radio({ value: 'Radio3', group: 'radioGroup' }) .myRadioStyle() .onChange((isChecked: boolean) => { if(isChecked)this.radioSelectName='Radio4' }) } } .width('100%') .height('100%') }}</string>复制代码
划线
评论
复制
发布于: 刚刚阅读数: 3
版权声明: 本文为 InfoQ 作者【auhgnixgnahz】的原创文章。
原文链接:【http://xie.infoq.cn/article/269270c81fcdbfecf899b201a】。文章转载请联系作者。
auhgnixgnahz
关注
还未添加个人签名 2018-07-10 加入
欢迎关注：HarmonyOS开发笔记
评论