ArKTS基础组件3

一.PatternLock

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

属性:

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

参数名	类型	必填	说明
value	Length	是	组件的宽度和高度。默认值：288vp

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

参数名	类型	必填	说明
value	Length	是	宫格中圆点的半径。默认值：6vp

参数名

类型

必填

说明

value

Length

是

宫格中圆点的半径。

默认值：6vp

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

参数名	类型	必填	说明
value	ResourceColor	是	宫格圆点在“未选中”状态的填充颜色。默认值：'#ff182431'

参数名

类型

必填

说明

value

ResourceColor

是

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

默认值：'#ff182431'

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

参数名	类型	必填	说明
value	ResourceColor	是	宫格圆点在“选中”状态的填充颜色。默认值：'#ff182431'

参数名

类型

必填

说明

value

ResourceColor

是

宫格圆点在“选中”状态的填充颜色。

默认值：'#ff182431'

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

参数名	类型	必填	说明
value	ResourceColor	是	宫格圆点在“激活”状态的填充颜色。默认值：'#ff182431'

参数名

类型

必填

说明

value

ResourceColor

是

宫格圆点在“激活”状态的填充颜色。

默认值：'#ff182431'

pathColor:设置连线的颜色。

参数名	类型	必填	说明
value	ResourceColor	是	连线的颜色。默认值：'#33182431'

参数名

类型

必填

说明

value

ResourceColor

是

连线的颜色。

默认值：'#33182431'

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

参数名	类型	必填	说明
value	number \| string	是	连线的宽度。默认值：12vp

参数名

类型

必填

说明

value

number | string

是

连线的宽度。

默认值：12vp

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

参数名	类型	必填	说明
value	boolean	是	在完成密码输入后再次在组件区域按下时是否重置组件状态。为true时，完成密码输入后再次在组件区域按下时会重置组件状态（即清除之前输入的密码）；为false时，不会重置组件状态。默认值：true

参数名

类型

必填

说明

value

boolean

是

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

为true时，完成密码输入后再次在组件区域按下时会重置组件状态（即清除之前输入的密码）；为false时，不会重置组件状态。

默认值：true

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

参数名	类型	必填	说明
options	CircleStyleOptions	是	宫格圆点在“激活”状态的背景圆环样式。

CircleStyleOptions12+对象说明:

名称	参数类型	必填	描述
color	ResourceColor	否	背景圆环颜色。默认值：与pathColor值相同
radius	LengthMetrics	否	背景圆环的半径。默认值：circleRadius的11/6
enableWaveEffect	boolean	否	波浪效果开关。默认值：true

名称

参数类型

必填

描述

color

ResourceColor

否

背景圆环颜色。

默认值：与pathColor值相同

radius

LengthMetrics

否

背景圆环的半径。

默认值：circleRadius的11/6

enableWaveEffect

boolean

否

波浪效果开关。

默认值：true

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

参数名	类型	必填	说明
input	Array<number>	是	与选中宫格圆点顺序一致的数字数组，数字为选中宫格圆点的索引值（第一行圆点从左往右依次为0、1、2，第二行圆点依次为3、4、5，第三行圆点依次为6、7、8）。

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。非法数值不生效。

参数名	类型	必填	说明
value	number	是	当前进度值。默认值：0

参数名

类型

必填

说明

value

number

是

当前进度值。

默认值：0

color:设置进度条前景色。

参数名	类型	必填	说明
value	ResourceColor \| LinearGradient10+	是	进度条前景色。默认值： - Capsule： API version 9及以下：'#ff007dff' API version 10：'#33006cde' API version 11及以上：'#33007dff' - Ring： API version 9及以下：'#ff007dff' API version 10及以上：起始端：'#ff86c1ff'，结束端：'#ff254ff7' - 其他样式：'#ff007dff'

参数名

类型

必填

说明

value

ResourceColor | LinearGradient10+

是

进度条前景色。

默认值：

- Capsule：

API version 9及以下：'#ff007dff'

API version 10：'#33006cde'

API version 11及以上：'#33007dff'

- Ring：

API version 9及以下：'#ff007dff'

API version 10及以上：起始端：'#ff86c1ff'，结束端：'#ff254ff7'

- 其他样式：'#ff007dff'

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

参数名	类型	必填	说明
value	ResourceColor	是	进度条底色。默认值： - Capsule： API version 9及以下：'#19182431' API version 10及以上：'#33ffffff' - Ring： API version 9及以下：'#19182431' API version 10：'#08182431' API version 11及以上：'#0c182431' - 其他样式：'#19182431'

参数名

类型

必填

说明

value

ResourceColor

是

进度条底色。

默认值：

- Capsule：

API version 9及以下：'#19182431'

API version 10及以上：'#33ffffff'

- Ring：

API version 9及以下：'#19182431'

API version 10：'#08182431'

API version 11及以上：'#0c182431'

- 其他样式：'#19182431'

style8+:设置组件的样式。

参数名	类型	必填	说明
value	ProgressStyleOptions8+ \| CapsuleStyleOptions10+ \| RingStyleOptions10+ \| LinearStyleOptions10+ \| ScaleRingStyleOptions10+ \| EclipseStyleOptions10+	是	组件的样式。 - CapsuleStyleOptions：设置Capsule的样式。 - RingStyleOptions：设置Ring的样式。 - LinearStyleOptions：设置Linear的样式。 - ScaleRingStyleOptions：设置ScaleRing的样式。 - EclipseStyleOptions：设置Eclipse的样式。 - ProgressStyleOptions：仅可设置各类型进度条的基本样式。 ProgressStyleOptions，暂不支持其它的参数类型。

参数名

类型

必填

说明

value

ProgressStyleOptions8+ | CapsuleStyleOptions10+ |

RingStyleOptions10+ | LinearStyleOptions10+ |

ScaleRingStyleOptions10+ | EclipseStyleOptions10+

是

组件的样式。

- CapsuleStyleOptions：设置Capsule的样式。

- RingStyleOptions：设置Ring的样式。

- LinearStyleOptions：设置Linear的样式。

- ScaleRingStyleOptions：设置ScaleRing的样式。

- EclipseStyleOptions：设置Eclipse的样式。

- ProgressStyleOptions：仅可设置各类型进度条的基本样式。

ProgressStyleOptions，暂不支持其它的参数类型。

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

参数名	类型	必填	说明
modifier	ContentModifier<ProgressConfiguration>	是	在progress组件上，定制内容区的方法。 modifier: 内容修改器，开发者需要自定义class实现ContentModifier接口。

参数名

类型

必填

说明

modifier

ContentModifier<ProgressConfiguration>

是

在progress组件上，定制内容区的方法。

modifier: 内容修改器，开发者需要自定义class实现ContentModifier接口。

ProgressConfiguration12+

名称	参数类型	描述
value	number	当前进度值。
total	number	进度总长。

ProgressStyleOptions8+

名称	参数类型	必填	描述
strokeWidth	Length	否	设置进度条宽度（不支持百分比设置）。默认值：4.0vp
scaleCount	number	否	设置环形进度条总刻度数。默认值：120
scaleWidth	Length	否	设置环形进度条刻度粗细（不支持百分比设置），刻度粗细大于进度条宽度时，为系统默认粗细。默认值：2.0vp
enableSmoothEffect10+	boolean	否	进度平滑动效的开关。开启平滑动效后设置进度，进度会从当前值渐变至设定值，否则进度从当前值突变至设定值。默认值：true

CapsuleStyleOptions10+

名称	参数类型	必填	描述
borderColor	ResourceColor	否	内描边颜色。默认值： API version 10：'#33006cde' API version 11及以上：'#33007dff'
borderWidth	Length	否	内描边宽度（不支持百分比设置）。默认值：1vp
content	string	否	文本内容，应用可自定义。
font	Font	否	文本样式。默认值： - 文本大小（不支持百分比设置）：12fp 其他文本参数跟随text组件的主题值。
fontColor	ResourceColor	否	文本颜色。默认值：'#ff182431'
enableScanEffect	boolean	否	扫光效果的开关。默认值：false
showDefaultPercentage	boolean	否	显示百分比文本的开关，开启后会在进度条上显示当前进度的百分比。设置了content属性时该属性不生效。默认值：false
enableSmoothEffect	boolean	否	进度平滑动效的开关。开启平滑动效后设置进度，进度会从当前值渐变至设定值，否则进度从当前值突变至设定值。默认值：true

RingStyleOptions10+:

名称	参数类型	必填	描述
strokeWidth	Length	否	设置进度条宽度（不支持百分比设置），宽度大于等于半径时，默认修改宽度至半径值的二分之一。默认值：4.0vp
shadow	boolean	否	进度条阴影开关。默认值：false
status	ProgressStatus10+	否	进度条状态，当设置为LOADING时会开启检查更新动效，此时设置进度值不生效。当从LOADING设置为PROGRESSING，检查更新动效会执行到终点再停止。默认值： ProgressStatus.PROGRESSING
enableScanEffect	boolean	否	进度条扫光效果的开关。默认值： false
enableSmoothEffect	boolean	否	进度平滑动效的开关。开启平滑动效后设置进度，进度会从当前值渐变至设定值，否则进度从当前值突变至设定值。默认值：true

LinearStyleOptions10+

名称	参数类型	必填	描述
strokeWidth	Length	否	设置进度条宽度（不支持百分比设置）。默认值：4.0vp
strokeRadius	PX \| VP \| LPX \| Resource	否	设置线性进度条圆角半径。取值范围[0, strokeWidth / 2]。默认值：strokeWidth / 2。
enableScanEffect	boolean	否	进度条扫光效果的开关。默认值： false
enableSmoothEffect	boolean	否	进度平滑动效的开关。开启平滑动效后设置进度，进度会从当前值渐变至设定值，否则进度从当前值突变至设定值。默认值：true

ScaleRingStyleOptions10+

名称	参数类型	必填	描述
strokeWidth	Length	否	设置进度条宽度（不支持百分比设置）。默认值：4.0vp
scaleCount	number	否	设置环形进度条总刻度数。默认值：120
scaleWidth	Length	否	设置环形进度条刻度粗细（不支持百分比设置），刻度粗细大于进度条宽度时，为系统默认粗细。默认值：2.0vp
enableSmoothEffect	boolean	否	进度平滑动效的开关。开启平滑动效后设置进度，进度会从当前值渐变至设定值，否则进度从当前值突变至设定值。默认值：true

EclipseStyleOptions10+

名称	参数类型	必填	描述
enableSmoothEffect	boolean	否	进度平滑动效的开关。开启平滑动效后设置进度，进度会从当前值渐变至设定值，否则进度从当前值突变至设定值。默认值：true

名称

参数类型

必填

描述

enableSmoothEffect

boolean

否

进度平滑动效的开关。开启平滑动效后设置进度，进度会从当前值渐变至设定值，否则进度从当前值突变至设定值。

默认值：true

ProgressStatus10+枚举说明

名称	描述
LOADING	加载中。
PROGRESSING	进度更新中。

示例代码:

@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:设置二维码颜色。

参数名	类型	必填	说明
value	ResourceColor	是	二维码颜色。默认值：'#ff182431'

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

参数名	类型	必填	说明
value	ResourceColor	是	二维码背景颜色。默认值：Color.White 从API version 11开始，默认值改为'#ffffffff'。

参数名

类型

必填

说明

value

ResourceColor

是

二维码背景颜色。

默认值：Color.White

从API version 11开始，默认值改为'#ffffffff'。

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

参数名	类型	必填	说明
value	number \| Resource	是	二维码内容颜色的不透明度。默认值：1

参数名

类型

必填

说明

value

number | Resource

是

二维码内容颜色的不透明度。

默认值：1

示例代码:

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

四. Radio

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

接口

Radio(options: RadioOptions)

创建单选框组件。

参数名	类型	必填	描述
options	RadioOptions	是	配置单选框的参数。

属性:

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

参数名	类型	必填	说明
value	boolean	是	单选框的选中状态。默认值：false

参数名

类型

必填

说明

value

boolean

是

单选框的选中状态。

默认值：false

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

参数名	类型	必填	说明
value	RadioStyle	否	单选框选中状态和非选中状态的样式。

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

参数名	类型	必填	说明
modifier	ContentModifier<RadioConfiguration>	是	在Radio组件上，定制内容区的方法。 modifier: 内容修改器，开发者需要自定义class实现ContentModifier接口。

参数名

类型

必填

说明

modifier

ContentModifier<RadioConfiguration>

是

在Radio组件上，定制内容区的方法。

modifier: 内容修改器，开发者需要自定义class实现ContentModifier接口。

示例代码:

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的值时，按默认值显示。

参数名	类型	必填	说明
value	number	是	设置评分总数。默认值：5

参数名

类型

必填

说明

value

number

是

设置评分总数。

默认值：5

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

参数名	类型	必填	说明
value	number	是	操作评级的步长。默认值：0.5 取值范围：[0.1, stars]

参数名

类型

必填

说明

value

number

是

操作评级的步长。

默认值：0.5

取值范围：[0.1, stars]

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

参数名	类型	必填	说明
value	{ backgroundUri: string, foregroundUri: string, secondaryUri?: string }	是	backgroundUri：未选中的星级的图片链接，可由用户自定义或使用系统默认图片。 foregroundUri：选中的星级的图片路径，可由用户自定义或使用系统默认图片。 secondaryUri：部分选中的星级的图片路径，可由用户自定义或使用系统默认图片。说明： backgroundUri或者foregroundUri或者secondaryUri设置的图片路径错误时，图片不显示。 backgroundUri或者foregroundUri设置为undefined或者空字符串时，rating会选择加载系统默认星型图源。 secondaryUri不设置或者设置的值为undefined或者空字符串时，优先设置为backgroundUri，效果上等同于只设置了foregroundUri、backgroundUri。

参数名

类型

必填

说明

value

{

backgroundUri: string,

foregroundUri: string,

secondaryUri?: string

}

是

backgroundUri：未选中的星级的图片链接，可由用户自定义或使用系统默认图片。

foregroundUri：选中的星级的图片路径，可由用户自定义或使用系统默认图片。

secondaryUri：部分选中的星级的图片路径，可由用户自定义或使用系统默认图片。

说明：

backgroundUri或者foregroundUri或者secondaryUri设置的图片路径错误时，图片不显示。

backgroundUri或者foregroundUri设置为undefined或者空字符串时，rating会选择加载系统默认星型图源。

secondaryUri不设置或者设置的值为undefined或者空字符串时，优先设置为backgroundUri，效果上等同于只设置了foregroundUri、backgroundUri。

示例代码:

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)

参数名	类型	必填	说明
value	RichEditorOptions	是	富文本组件初始化选项。

RichEditor(value: RichEditorStyledStringOptions)12+

参数：

参数名	类型	必填	说明
value	RichEditorStyledStringOptions	是	富文本组件初始化选项。

属性:

customKeyboard:设置自定义键盘。

参数名	类型	必填	说明
value	CustomBuilder	是	自定义键盘。元服务API：从API version 11开始，该接口支持在元服务中使用。
options12+	KeyboardOptions	否	设置自定义键盘是否支持避让功能。

参数名

类型

必填

说明

value

CustomBuilder

是

自定义键盘。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

options12+

KeyboardOptions

否

设置自定义键盘是否支持避让功能。

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

参数名	类型	必填	说明
spanType	RichEditorSpanType	是	菜单的类型。默认值： RichEditorSpanType.TEXT
content	CustomBuilder	是	菜单的内容。
responseType	ResponseType \| RichEditorResponseType11+	是	菜单的响应类型。默认值： ResponseType.LongPress
options	SelectionMenuOptions	否	菜单的选项。

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

参数名	类型	必填	说明
value	CopyOptions	是	组件支持文本内容是否可复制粘贴。默认值：CopyOptions.LocalDevice

参数名

类型

必填

说明

value

CopyOptions

是

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

默认值：CopyOptions.LocalDevice

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

参数名	类型	必填	说明
vaule	EnterKeyType	是	键盘输入法回车键类型。默认为EnterKeyType.NEW_LINE。

参数名

类型

必填

说明

vaule

EnterKeyType

是

键盘输入法回车键类型。

默认为EnterKeyType.NEW_LINE。

示例代码:

 @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键

  }
}