鸿蒙ArkUI实现开关switch组件

/**
 * 开关
 */
@Component
export default  struct DiygwSwitch{
  //绑定的值
  @Link value:number;
  //未选中图标
  @State labelImg: Resource = $r('app.media.user');
  //是否文本图片
  @State isLabelImg: boolean = false;
  @State labelImgWidth: number = 20;
  @State labelImgHeight: number = 20;
  //标题文本
  @State label:string = '开关';
  //水平状态时，文本占大小
  @State labelWidth:number = 80;
  //是否标题文本换行
  @State isWrapLabel:boolean = false;
  //是否标题文本
  @State isLabel:boolean = true;
  //标题颜色
  @State labelColor:string = "#333333";
  //自动标题长度
  @State isLabelAuto:boolean = false;
  //文本字体大小
  @State textSize:number = 14;
  //选中图版本大小
  @State imgSize:number = 28;
  //组件内边距
  @State leftRightPadding:number = 16;
  @State topBottomPadding:number = 6;
 
  @State justifyContent:FlexAlign = FlexAlign.End
  @State pointColor:string = "#fff";
  @State selectedColor:string = "#07c160";
  @State isShowValue:boolean = true;
  @State isBorder:boolean = true;
  build() {
    Flex({
      alignItems:this.isWrapLabel?ItemAlign.Start:ItemAlign.Center,
      direction:this.isWrapLabel?FlexDirection.Column:FlexDirection.Row,
      justifyContent:FlexAlign.Start
    }){
      if(this.isLabel){
        Row(){
          if(this.isLabelImg){
            Image(this.labelImg)
              .width(this.labelImgWidth)
              .height(this.labelImgHeight)
              .margin({ left:3 }).flexShrink(0)
          }
          if(this.isLabelAuto){
            Text(this.label).flexShrink(0).fontColor(this.labelColor).fontSize(this.textSize).margin({
              bottom:this.isWrapLabel?10:0,
              right:10,
            }).textAlign(TextAlign.Start);
          }else{
            Text(this.label).fontColor(this.labelColor).width(this.isWrapLabel?'100%':this.labelWidth).fontSize(this.textSize).margin({
              bottom:this.isWrapLabel?10:0
            }).textAlign(TextAlign.Start);
          }
        }.margin({
          top:this.isWrapLabel?10:0
        })
      }
 
      Flex({
        alignItems:this.isWrapLabel?ItemAlign.Start:ItemAlign.Center,
        justifyContent:this.justifyContent
      }){
        Toggle({ type: ToggleType.Switch, isOn: this.value==1 })
          .selectedColor(this.selectedColor)
          .switchPointColor(this.pointColor)
          .height(40)
          .onChange((isOn: boolean) => {
            this.value = this.value==1?0:1
          })
      }
    }.borderWidth({
      bottom: this.isBorder?1:0
    }).borderColor({
      bottom: "#eee"
    }).borderStyle(BorderStyle.Solid).borderStyle(BorderStyle.Solid).height(this.textSize+(this.isWrapLabel?20:0)+30+this.topBottomPadding*2).padding({left:this.leftRightPadding,right:this.leftRightPadding,top:this.topBottomPadding,bottom:this.topBottomPadding})
  }
}