ArKTS基础组件3

一.PatternLock

图案密码锁组件，以九宫格图案的方式输入密码，用于密码验证场景

属性:

sideLength:设置组件的宽度和高度（宽高相同）。设置为0或负数时组件不显示。

circleRadius:设置宫格中圆点的半径。设置为0或负数时取默认值。

 regularColor:设置宫格圆点在“未选中”状态的填充颜色。

 selectedColor:设置宫格圆点在“选中“状态的填充颜色。

 activeColor:设置宫格圆点在“激活”状态的填充颜色，“激活”状态为手指经过圆点但还未选中的状态。

pathColor:设置连线的颜色。

 pathStrokeWidth:设置连线的宽度。设置为0或负数时连线不显示。

 autoReset:设置在完成密码输入后再次在组件区域按下时是否重置组件状态。

 activateCircleStyle12+:设置宫格圆点在“激活”状态的背景圆环样式。

CircleStyleOptions12+对象说明: 

 onPatternComplet:密码输入结束时触发该回调。

 onDotConnect11+:密码输入选中宫格圆点时触发该回调。

示例代码:

 acs:LengthMetrics=new LengthMetrics(10)
  @State onPattern:number[]=[]
  @State pwdMsg:string='请设置密码'
patternLockController: PatternLockController = new PatternLockController()
  @Builder PatternLockTest(){
    Text(this.pwdMsg).fontSize(30)
    Text(this.onPattern.toString()).fontSize(30)
    PatternLock(this.patternLockController)
      .sideLength('100%')
      .circleRadius(10)//圆点半径
      .regularColor('#ccc')//未选中颜色
      .selectedColor('red')//选中颜色
      .activeColor('blue')//激活状态颜色
      .pathColor('#fcf')//连线颜色
      .pathStrokeWidth(5)//连线宽度
      .autoReset(true)//自动重置
      .activateCircleStyle({color:'green',radius:this.acs,enableWaveEffect:true})
      .onPatternComplete((input:Array<number>)=>{//input:输入的数字的数组
        //输入完成后重置
        this.patternLockController.reset()
        if (input.length<5){
          this.pwdMsg='最少连接5个'
          return//结束函数
        }
        if (this.onPattern.length==0) {
          this.onPattern=input
          this.pwdMsg='请再次设置'
        }else {
          if (this.onPattern.toString()==input.toString()) {
            this.pwdMsg='两次密码一致'
            this.patternLockController.setChallengeResult(PatternLockChallengeResult.CORRECT)
            //todo 跳转
          }else {
            this.pwdMsg='两次密码不一致'
            this.patternLockController.setChallengeResult(PatternLockChallengeResult.WRONG)

          }
        }
      })
      .onDotConnect((num)=>{//输入的单个数字
        console.log(`选中数字:${num}`)
      })


  }

 二.Progress

进度条组件，用于显示内容加载或操作处理等进度。

属性:

value:设置当前进度值。设置小于0的数值时置为0，设置大于total的数值时置为total。非法数值不生效。

color:设置进度条前景色。

 backgroundColor:设置进度条底色。当设置通用属性backgroundColor时，生效的是进度条的底色，而不是整个Progress组件的背景色。

 style8+:设置组件的样式。

 contentModifier12+:定制progress内容区的方法。

 ProgressConfiguration12+

 ProgressStyleOptions8+

 CapsuleStyleOptions10+

 RingStyleOptions10+:

 LinearStyleOptions10+

 ScaleRingStyleOptions10+

 EclipseStyleOptions10+

ProgressStatus10+枚举说明

示例代码:

@State proValue:number=30
  @Builder ProgressTest(){
  Scroll(){
    Column({space:5}){
      Progress({value:50,total:100,type:ProgressType.Linear})
      Progress({value:50,total:100,type:ProgressType.Ring})
        .height(200)
        .style({
          strokeWidth:10,shadow:true,
          status:ProgressStatus.LOADING,
        })
      Progress({value:50,total:100,type:ProgressType.Eclipse})
        .enabled(true)//进度平滑开关
      Progress({value:50,total:100,type:ProgressType.Capsule})
        .value(this.proValue)//默认值
        // .color('#fcf')//进度条颜色
        .backgroundColor('#ccc')
        .style({
          borderColor:Color.Green,borderWidth:1,
          // content:`下载进度:${this.proValue}%`,
          font:{size:14,style:FontStyle.Italic},fontColor:Color.White,
          enableScanEffect:true,//扫光效果
          showDefaultPercentage:true,//显示百分比
        })
      Progress({value:50,total:100,type:ProgressType.ScaleRing})
        .height(300)
        .style({strokeWidth:50,scaleCount:100,scaleWidth:5,enableSmoothEffect:true})
        .value(this.proValue)
        .onClick(()=>{
          this.proValue+=10
        })
    }
  }
  }

 五星好评:

class MyProgressModifier implements ContentModifier<ProgressConfiguration> {
  color: Color = Color.White


  constructor(color:Color) {
    this.color = color
  }
  applyContent() : WrappedBuilder<[ProgressConfiguration]>
  {
    return wrapBuilder(myProgress)
  }
}
@Builder function  myProgress(config: ProgressConfiguration ) {

  Column({space:30}) {
    Text("当前进度：" + config.value + "/" + config.total).fontSize(20)
    Row() {
      Flex({ justifyContent: FlexAlign.SpaceBetween }) {
        Path()
          .width('20%')
          .height('20%')
          .commands('M108 0 L141 70 L218 78.3 L162 131 L175 205 L108 170 L41.2 205 L55 131 L1 78 L75 68 L108 0 Z')
          .fill(config.enabled && config.value >=1 ? (config.contentModifier as MyProgressModifier).color : Color.White)
          .stroke(Color.Black)
          .strokeWidth(3)
        Path()
          .width('20%')
          .height('20%')
          .commands('M108 0 L141 70 L218 78.3 L162 131 L175 205 L108 170 L41.2 205 L55 131 L1 78 L75 68 L108 0 Z')
          .fill(config.enabled && config.value >=2 ? (config.contentModifier as MyProgressModifier).color : Color.White)
          .stroke(Color.Black)
          .strokeWidth(3)
        Path()
          .width('20%')
          .height('20%')
          .commands('M108 0 L141 70 L218 78.3 L162 131 L175 205 L108 170 L41.2 205 L55 131 L1 78 L75 68 L108 0 Z')
          .fill(config.enabled && config.value >=3 ? (config.contentModifier as MyProgressModifier).color : Color.White)
          .stroke(Color.Black)
          .strokeWidth(3)
        Path()
          .width('20%')
          .height('20%')
          .commands('M108 0 L141 70 L218 78.3 L162 131 L175 205 L108 170 L41.2 205 L55 131 L1 78 L75 68 L108 0 Z')
          .fill(config.enabled && config.value >=4 ? (config.contentModifier as MyProgressModifier).color : Color.White)
          .stroke(Color.Black)
          .strokeWidth(3)
        Path()
          .width('20%')
          .height('20%')
          .commands('M108 0 L141 70 L218 78.3 L162 131 L175 205 L108 170 L41.2 205 L55 131 L1 78 L75 68 L108 0 Z')
          .fill(config.enabled && config.value >=5 ? (config.contentModifier as MyProgressModifier).color : Color.White)
          .stroke(Color.Black)
          .strokeWidth(3)
      }.width('100%')
    }
  }.margin({bottom:100})
}






@State wjx:number=0
  myModifer:MyProgressModifier=new MyProgressModifier(Color.Green)
  @Builder ProgressTest2(){
    Progress({value:this.wjx,total:5,type:ProgressType.Ring})
      .contentModifier(this.myModifer)
    Button('++').onClick(()=>{
      if (this.wjx<5){
        this.wjx++
      }
    })
    Button('--').onClick(()=>{
      if (this.wjx>0){
        this.wjx--
      }
    })

  }

 三.QRCode

用于显示单个二维码的组件。

属性:

color:设置二维码颜色。

backgroundColor: 设置二维码背景颜色。

 contentOpacity11+:设置二维码内容颜色的不透明度。不透明度最小值为0，最大值为1。

 示例代码:

  @Builder QrCodeTest(){
  QRCode('hello')
    .color('#fcf')
    .backgroundColor('#abcdef')
    .contentOpacity(0.5)
  }

四. Radio

单选框，提供相应的用户交互选择项。

接口

Radio(options: RadioOptions)

创建单选框组件。

 属性:

checked:设置单选框的选中状态。

 radioStyle10+:设置单选框选中状态和非选中状态的样式。

 contentModifier12+:定制Radio内容区的方法。

示例代码:

class MyRadio implements ContentModifier<RadioConfiguration>{
  type: number = 0
  selectedColor:Color = Color.Black

  constructor(numberType: number, colorType:Color) {
    this.type = numberType
    this.selectedColor = colorType
  }
  applyContent(): WrappedBuilder<[RadioConfiguration]> {
    return wrapBuilder(a)
  }
}
@Builder function a(config:RadioConfiguration){
SymbolGlyph($r('sys.symbol.heart_fill'))
  .fontColor(config.checked?[(config.contentModifier as MyRadio).selectedColor]:['gray'])
  .onClick(()=>{
    if (config.checked) {
      config.triggerChange(false)
    }else {
      config.triggerChange(true)
    }
  })
}

@Builder rs(){
    Image($r('app.media.app_icon')).borderRadius(50)
}
myRadio:MyRadio=new MyRadio(0,Color.Red)
  @Builder RadioTest(){
    Row(){
      Text('性别:')
      Radio({value:'男',group:'sex',indicatorType:RadioIndicatorType.DOT})
        .checked(true)
        .radioStyle({
          checkedBackgroundColor:Color.Green,
          uncheckedBorderColor:Color.Orange,
          indicatorColor:Color.Red
        })
      Text('男')
      Radio({value:'女',group:'sex',indicatorType:RadioIndicatorType.CUSTOM})
        .checked(true)
        .radioStyle({
          checkedBackgroundColor:Color.Green,
          uncheckedBorderColor:Color.Orange,
          indicatorColor:Color.Red
        })
      Text('女')
      Radio({value:'鸡',group:'sex',indicatorType:RadioIndicatorType.CUSTOM,
        indicatorBuilder:this.rs()})
        .checked(true)
        .radioStyle({
          checkedBackgroundColor:Color.Green,
          uncheckedBorderColor:Color.Orange,
          indicatorColor:Color.Red
        })
      Text('鸡')
      Radio({value:'鸡2',group:'sex'})
        .contentModifier(this.myRadio)
        .checked(true)

    }.width('100%')
    Row(){
      Radio({value:'a',group:'a'})
        .contentModifier(new MyRadio(1,Color.Red))
      Radio({value:'a',group:'a'})
        .contentModifier(new MyRadio(2,Color.Red))
    }
  }

五. Rating

提供在给定范围内选择评分的组件

属性:

stars:设置评分总数。设置为小于等于0的值时，按默认值显示。

stepSize: 设置操作评级的步长。设置为小于0.1的值时，按默认值显示。

 starStyle:设置评分的样式。该属性所支持的图片类型能力参考Image组件。

 示例代码:

class  MyRating implements  ContentModifier<RatingConfiguration>{
  applyContent(): WrappedBuilder<[RatingConfiguration]> {
   return wrapBuilder(rating)
  }

}

@Builder function rating(config:RatingConfiguration){
  Row(){

    SymbolGlyph(config.rating>0.9?$r('sys.symbol.star_fill'):
    $r('sys.symbol.star'))
      .fontColor(['red'])
      .onClick(()=>{
        config.triggerChange(1)
      })
    SymbolGlyph(config.rating>1?$r('sys.symbol.star_fill'):
    $r('sys.symbol.star'))
      .fontColor(['red'])
      .onClick(()=>{
        config.triggerChange(2)
      })
    SymbolGlyph(config.rating>2?$r('sys.symbol.star_fill'):
    $r('sys.symbol.star'))
      .fontColor(['red'])
      .onClick(()=>{
        config.triggerChange(3)
      })
  }.width('100%')


}

  @Builder ratingTest(){
    Column(){
      Rating({rating:0.5,indicator:true})
      Rating({rating:0.5,indicator:false})
        // .stars(10)//总数
        .stepSize(0.5)//步长
        .starStyle({
          backgroundUri:'/img/startIcon.png',
          foregroundUri:'/img/startIcon.png',
          secondaryUri:'/img/startIcon.png'
        })
        .backgroundColor('red')
      Rating({rating:1,indicator:false})
        .stars(3)
        .stepSize(1)
        .contentModifier(new MyRating())
    }


  }

六. RichEditor

支持图文混排和文本交互式编辑的组件。

接口

RichEditor(value: RichEditorOptions)

RichEditor(value: RichEditorStyledStringOptions)12+

参数：

属性:

customKeyboard:设置自定义键盘。

bindSelectionMenu:设置自定义选择菜单。自定义菜单超长时，建议内部嵌套Scroll组件使用，避免键盘被遮挡。

copyOptions:设置组件是否支持文本内容可复制粘贴。

enterKeyType12+:设置软键盘输入法回车键类型。

示例代码:

 @Builder ratingTest(){
    Column(){
      Rating({rating:0.5,indicator:true})
      Rating({rating:0.5,indicator:false})
        // .stars(10)//总数
        .stepSize(0.5)//步长
        .starStyle({
          backgroundUri:'/img/startIcon.png',
          foregroundUri:'/img/startIcon.png',
          secondaryUri:'/img/startIcon.png'
        })
        .backgroundColor('red')
      Rating({rating:1,indicator:false})
        .stars(3)
        .stepSize(1)
        .contentModifier(new MyRating())
    }


  }
controller:RichEditorController=new RichEditorController()
  @Builder zj(){
    Row().height(30).width('100%').backgroundColor('red')
  }
  @Builder jp(){
   Grid(){
     ForEach(['1','2','3','4','5','6','7','8','9','*','0','#'],(i:string)=>{
       GridItem(){
         Button(i).width(100)
           .onClick(()=>{
             this.controller.setCaretOffset(3)
             console.log('光标位置'+this.controller.getCaretOffset())
             this.controller.addTextSpan(i,{style:{fontColor:'red'}})
           })
       }
     })
     GridItem(){
       Button('添加图片').width(100)
         .onClick(()=>{
          this.controller.addImageSpan($r('app.media.app_icon'),)
         })
     }
     GridItem(){
       Button('添加组件').width(100)
         .onClick(()=>{
           this.controller.addBuilderSpan(this.zj())
         })
     }
     GridItem(){
       Button('添加图标').width(100)
         .onClick(()=>{
           this.controller.addSymbolSpan($r('sys.symbol.circle_below_plus_shield'),{style:{fontSize:20,fontColor:['red']}})
         })
     }
     GridItem(){
       Button('获取样式').width(100)
         .onClick(()=>{
           console.log(this.controller.getTypingStyle().fontColor?.toString())
         })
     }
     GridItem(){
       Button('预设样式').width(100)
         .onClick(()=>{
           this.controller.setTypingStyle({
             fontColor:'blue',fontSize:18,fontWeight:700
           })
         })
     }
     GridItem(){
       Button('修改预设').width(100)
         .onClick(()=>{
           this.controller.setTypingStyle({
             fontColor:'blue',fontSize:18,fontWeight:700
           })
         })
     }

    }.height(500).width('100%').backgroundColor(Color.Orange)
    .maxCount(3).columnsGap(10).rowsGap(10).padding(6)
  }
  @Builder menus(){
    Row(){

    }.height(100).width('100%').backgroundColor(Color.Blue)
  }
  @Builder richTest(){
    RichEditor({controller:this.controller})
      .backgroundColor(Color.Gray).height(200)
      .borderRadius(15)
      .customKeyboard(this.jp())
      .bindSelectionMenu(RichEditorSpanType.TEXT,this.menus(),
      RichEditorResponseType.RIGHT_CLICK)
      .copyOptions(CopyOptions.LocalDevice)
      .placeholder('请输入文本',{font:{size:18},fontColor:Color.White})
      .caretColor(Color.Green)
      .selectedBackgroundColor(Color.Red)
      .enterKeyType(EnterKeyType.Go)//软键盘的enter键

  }
}