fix |> 20568 【依赖华为】我的评论列表中，上方展示的昵称，换行比安卓早，并且等级的位置展示不正确

+import { GradeSpan } from './span/GradeSpan';
+import { image } from '@kit.ImageKit';
+import { LengthMetrics } from '@kit.ArkUI';
+import { StringUtils } from 'wdKit';
+
+@Component
+export struct UserGradeTextSpan{
+  @Watch('contentChange')  @Prop nameContent:string = ""
+  @Watch('contentChange') @Prop gradeContent:string = ""
+  @Watch('contentChange') @Prop gradeWidth:number = 50
+
+  taskId:number = -1
+
+  customSpan3: GradeSpan | undefined = undefined;
+  style1: MutableStyledString | undefined = undefined;
+
+  imagePixelMap: image.PixelMap | undefined = undefined;
+
+  textController: TextController = new TextController();
+
+  private async getPixmapFromMedia(resource: Resource) {
+    let unit8Array = await getContext(this)?.resourceManager?.getMediaContent({
+      bundleName: resource.bundleName,
+      moduleName: resource.moduleName,
+      id: resource.id
+    });
+    let imageSource = image.createImageSource(unit8Array.buffer.slice(0, unit8Array.buffer.byteLength));
+    let createPixelMap: image.PixelMap = await imageSource.createPixelMap({
+      desiredPixelFormat: image.PixelMapFormat.RGBA_8888,
+      desiredSize: { width: vp2px(this.gradeWidth), height: vp2px(18) }
+    });
+    await imageSource.release();
+    return createPixelMap;
+  }
+
+  contentChange(){
+    if(this.taskId != -1){
+      clearTimeout(this.taskId)
+    }
+    this.taskId = setTimeout(() => {
+      this.createSpan()
+    }, 100);
+
+  }
+
+  async createSpan(){
+    if(StringUtils.isEmpty(this.nameContent)){
+      return
+    }
+    this.imagePixelMap = await this.getPixmapFromMedia($r('app.media.my_grade_bg'))
+    this.customSpan3 = new GradeSpan(this.gradeContent, this.gradeWidth, 18,this.imagePixelMap);
+    this.style1 = new MutableStyledString(this.customSpan3);
+
+    let name:MutableStyledString = new MutableStyledString(this.nameContent, [
+      {
+        start: 0,
+        length: 100,
+        styledKey: StyledStringKey.FONT,
+        styledValue: new TextStyle({ fontColor: Color.White,fontWeight: 500,fontSize: LengthMetrics.px(vp2px(20)) })
+      }])
+
+    name.appendStyledString(new StyledString(this.customSpan3))
+    this.textController.setStyledString(name)
+  }
+
+
+  aboutToAppear() {
+    this.createSpan()
+  }
+
+  build() {
+    Text(undefined, { controller: this.textController })
+      .copyOption(CopyOptions.InApp)
+      .maxLines(2)
+  }
+}

+import { drawing } from '@kit.ArkGraphics2D';
+import { image } from '@kit.ImageKit';
+
+export class GradeSpan extends CustomSpan {
+  width: number = 160;
+  word: string = "";
+  height: number = 10;
+  imagePixelMap: image.PixelMap | undefined = undefined;
+
+
+  constructor(word: string, width: number, height: number,imagePixelMap: image.PixelMap) {
+    super();
+    this.word = word;
+    this.width = width;
+    this.height = height;
+    this.imagePixelMap = imagePixelMap;
+  }
+
+  onMeasure(measureInfo: CustomSpanMeasureInfo): CustomSpanMetrics {
+    return { width: this.width, height: this.height };
+  }
+
+  onDraw(context: DrawContext, options: CustomSpanDrawInfo) {
+    let canvas = context.canvas;
+
+    const brush = new drawing.Brush();
+
+    canvas.attachBrush(brush);
+    let options2 = new drawing.SamplingOptions(drawing.FilterMode.FILTER_MODE_NEAREST);
+    if (this.imagePixelMap) {
+      canvas.drawImage(this.imagePixelMap, options.x , options.lineBottom - vp2px(this.height) - 10, options2);
+    }
+
+    brush.setColor({ alpha: 255, red: 237, green: 40, blue: 0 });
+    canvas.attachBrush(brush);
+
+    const font = new drawing.Font();
+    font.setSize(vp2px(12));
+    const textBlob = drawing.TextBlob.makeFromString(this.word, font, drawing.TextEncoding.TEXT_ENCODING_UTF8);
+    // canvas.drawTextBlob(textBlob, options.x + 20, options.lineBottom - 15);
+    canvas.drawTextBlob(textBlob, options.x + vp2px(9), options.lineBottom - vp2px(7.5));
+
+    canvas.detachBrush();
+  }
+
+  setWord(word: string) {
+    this.word = word;
+  }
+
+}

@@ -8,6 +8,7 @@ import MinePageDatasModel from '../model/MinePageDatasModel';
 import { EmptyComponent } from '../components/view/EmptyComponent';
 import { EmptyComponent } from '../components/view/EmptyComponent';
 import { CustomTitleUI } from '../components/reusable/CustomTitleUI';
 import { CustomTitleUI } from '../components/reusable/CustomTitleUI';
 import { TrackingPageBrowse, TrackConstants, TrackingButton, ParamType, Tracking } from 'wdTracking/Index';
 import { TrackingPageBrowse, TrackConstants, TrackingButton, ParamType, Tracking } from 'wdTracking/Index';
+import { UserGradeTextSpan } from '../components/view/UserGradeTextSpan';
 
 
 const  TAG = "MineHomePage"
 const  TAG = "MineHomePage"
 
 
@@ -121,37 +122,17 @@ struct MineHomePage {
 
 
                   Column() {
                   Column() {
                     Row() {
                     Row() {
-                      Text(`${this.userName}`)
-                        .fontColor($r('app.color.white'))
-                        .maxLines(2)
-                        .textOverflow({ overflow: TextOverflow.Ellipsis })
-                        .fontSize(20)
-                        .lineHeight(26)
-                        .fontWeight(500)
-                        .constraintSize({maxWidth:180})
-                        .onClick(()=>{
-                          let params: editModelParams = {
-                            editContent: this.userName
-                          }
-                          WDRouterRule.jumpWithPage(WDRouterPage.editUserNikeNamePage,params)
-                        })
-
-                      if(this.levelId>0){
-                        Text(`等级${this.levelId}`)
-                          .fontColor($r('app.color.color_ED2800'))
-                          .fontSize(12)
-                          .lineHeight(18)
-                          .fontWeight(500)
-                          .margin({ left: 6 })
-                          .backgroundImage($r("app.media.my_grade_bg"))
-                          .backgroundImageSize(ImageSize.Cover)
-                          .padding({left: 6,right: 6})
-                          .height(18)
-                          .borderRadius({topRight:2,bottomRight:2})
-                      }
 
 
-                      Blank()
-                    }
+                      UserGradeTextSpan({nameContent:`${this.userName}`,gradeContent:`等级${this.levelId}`,gradeWidth:this.levelId >9 ? 50 : 45})
+
+                    }.constraintSize({maxWidth:`calc(100% - 16vp - 90vp)`})
+                    .padding({top:8})
+                    .onClick(()=>{
+                      let params: editModelParams = {
+                        editContent: this.userName
+                      }
+                      WDRouterRule.jumpWithPage(WDRouterPage.editUserNikeNamePage,params)
+                    })
 
 
                     Row() {
                     Row() {
                       Row() {
                       Row() {