写点什么

鸿蒙 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
用户头像

auhgnixgnahz

关注

还未添加个人签名 2018-07-10 加入

欢迎关注:HarmonyOS开发笔记

评论

发布
暂无评论
鸿蒙Next选择按钮Toggle、Checkbox、Radio介绍_鸿蒙Next_auhgnixgnahz_InfoQ写作社区