ArKTS基础组件3
一.PatternLock
图案密码锁组件，以九宫格图案的方式输入密码，用于密码验证场景
属性:
sideLength:设置组件的宽度和高度（宽高相同）。设置为0或负数时组件不显示。
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| value | Length | 是 | 组件的宽度和高度。默认值：288vp |
circleRadius:设置宫格中圆点的半径。设置为0或负数时取默认值。
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| value | Length | 是 | 宫格中圆点的半径。 默认值：6vp |
regularColor:设置宫格圆点在“未选中”状态的填充颜色。
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| value | ResourceColor | 是 | 宫格圆点在“未选中”状态的填充颜色。 默认值：'#ff182431' |
selectedColor:设置宫格圆点在“选中“状态的填充颜色。
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| value | ResourceColor | 是 | 宫格圆点在“选中”状态的填充颜色。 默认值：'#ff182431' |
activeColor:设置宫格圆点在“激活”状态的填充颜色，“激活”状态为手指经过圆点但还未选中的状态。
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| value | ResourceColor | 是 | 宫格圆点在“激活”状态的填充颜色。 默认值：'#ff182431' |
pathColor:设置连线的颜色。
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| value | ResourceColor | 是 | 连线的颜色。 默认值：'#33182431' |
pathStrokeWidth:设置连线的宽度。设置为0或负数时连线不显示。
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| value | number | string | 是 | 连线的宽度。 默认值：12vp |
autoReset:设置在完成密码输入后再次在组件区域按下时是否重置组件状态。
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| value | boolean | 是 | 在完成密码输入后再次在组件区域按下时是否重置组件状态。 为true时，完成密码输入后再次在组件区域按下时会重置组件状态（即清除之前输入的密码）；为false时，不会重置组件状态。 默认值：true |
activateCircleStyle12+:设置宫格圆点在“激活”状态的背景圆环样式。
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| options | CircleStyleOptions | 是 | 宫格圆点在“激活”状态的背景圆环样式。 |
CircleStyleOptions12+对象说明:
| 名称 | 参数类型 | 必填 | 描述 |
|---|---|---|---|
| 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=inputthis.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 |
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' |
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' |
style8+:设置组件的样式。
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| 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接口。 |
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 |
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.Whiteconstructor(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=0myModifer: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'。 |
contentOpacity11+:设置二维码内容颜色的不透明度。不透明度最小值为0，最大值为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 |
radioStyle10+:设置单选框选中状态和非选中状态的样式。
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| value | RadioStyle | 否 | 单选框选中状态和非选中状态的样式。 |
contentModifier12+:定制Radio内容区的方法。
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| modifier | ContentModifier<RadioConfiguration> | 是 | 在Radio组件上，定制内容区的方法。 modifier: 内容修改器，开发者需要自定义class实现ContentModifier接口。 |
示例代码:
class MyRadio implements ContentModifier<RadioConfiguration>{type: number = 0selectedColor:Color = Color.Blackconstructor(numberType: number, colorType:Color) {this.type = numberTypethis.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 |
stepSize: 设置操作评级的步长。设置为小于0.1的值时，按默认值显示。
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| 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。 |
示例代码:
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 | 否 | 设置自定义键盘是否支持避让功能。 |
bindSelectionMenu:设置自定义选择菜单。自定义菜单超长时，建议内部嵌套Scroll组件使用，避免键盘被遮挡。
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| spanType | RichEditorSpanType | 是 | 菜单的类型。 默认值： RichEditorSpanType.TEXT |
| content | CustomBuilder | 是 | 菜单的内容。 |
| responseType | ResponseType | RichEditorResponseType11+ | 是 | 菜单的响应类型。 默认值： ResponseType.LongPress |
| options | SelectionMenuOptions | 否 | 菜单的选项。 |
copyOptions:设置组件是否支持文本内容可复制粘贴。
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| value | CopyOptions | 是 | 组件支持文本内容是否可复制粘贴。 默认值：CopyOptions.LocalDevice |
enterKeyType12+:设置软键盘输入法回车键类型。
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| 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键}
}