鸿蒙Next选择按钮Toggle、Checkbox、Radio介绍

本文介绍一下常用的选择开关、单选、多选按钮使用。

效果演示：

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.cpp
void 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
@ComponentV2
struct 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%')
  }
}