desc:评论相关

-import { EmitterEventId, EmitterUtils } from 'wdKit/Index'
+import { DisplayUtils, EmitterEventId, EmitterUtils } from 'wdKit/Index'
 import { publishCommentModel } from '../model/PublishCommentModel'
 import { CommentCustomDialog } from './CommentCustomDialog'
-
+import measure from '@ohos.measure'
 
 @Preview
 @Component
 export struct CommentTabComponent {
   @ObjectLink publishCommentModel: publishCommentModel
   /*展示类型*/
-  @State type:number = 1
+  @State type: number = 1
   @State placeHolder: string = '说两句...'
-
   @State dialogController: CustomDialogController | null = null;
-
   /*回调方法*/
-  dialogControllerConfirm: () => void = () => {}
-
-
+  dialogControllerConfirm: () => void = () => {
+  }
 
   aboutToAppear() {
 
@@ -24,9 +21,9 @@ export struct CommentTabComponent {
       builder: CommentCustomDialog({
         confirm: (value: Record<string, string>) => {
           this.dialogControllerConfirm();
-          EmitterUtils.sendEvent(EmitterEventId.COMMENT_PUBLISH,this.publishCommentModel.targetId)
+          EmitterUtils.sendEvent(EmitterEventId.COMMENT_PUBLISH, this.publishCommentModel.targetId)
         },
-        publishCommentModel:this.publishCommentModel
+        publishCommentModel: this.publishCommentModel
       }),
       autoCancel: true,
       alignment: DialogAlignment.Bottom,
@@ -40,13 +37,13 @@ export struct CommentTabComponent {
   }
 
   build() {
-    Row(){
-      Stack({alignContent:Alignment.Start}){
+    Row() {
+      Stack({ alignContent: Alignment.Start }) {
         Image($r('app.media.comment_img_input_hui')).width(151).height(30)
-        Text(this.placeHolder).fontSize(12).fontColor('#999999').margin({left:10})
+        Text(this.placeHolder).fontSize(12).fontColor('#999999').margin({ left: 10 })
       }
     }.width(151).height(30)
-    .onClick(()=>{
+    .onClick(() => {
       this.publishCommentModel.parentId = '-1';
       this.dialogController?.open();
     })
@@ -58,54 +55,84 @@ export struct CommentTabComponent {
 export struct CommentIconComponent {
   @ObjectLink publishCommentModel: publishCommentModel
   /*展示类型*/
-  @State type:number = 1
+  @State type: number = 1
+
+  aboutToAppear(): void {
+    setTimeout(() => {
+      this.publishCommentModel.totalCommentNumer = '444'
+    }, 3000);
+
+    setTimeout(() => {
+      this.publishCommentModel.totalCommentNumer = '2'
+    }, 4000);
+
+  }
 
   /*回调方法*/
-  onClickItem: () => void = () => {}
+  onClickItem: () => void = () => {
+  }
 
   build() {
-    Row(){
-      Stack({alignContent:Alignment.TopEnd}){
+    Row() {
+      Stack({ alignContent: Alignment.TopEnd }) {
         Image($r('app.media.comment_icon')).width(24).height(24)
         // Stack({alignContent:Alignment.Start}) {
+        // if(Number.parseInt(this.publishCommentModel.totalCommentNumer) != 0){
         RelativeContainer() {
           Image($r('app.media.comment_icon_number_bg'))
             .objectFit(ImageFit.Fill)
-              .resizable({ slice: {top:1, left: 20 , right:1, bottom:1} })
+            .resizable({ slice: { top: 1, left: 20, right: 1, bottom: 1 } })
             .alignRules({
-                top: {anchor: "Text", align: VerticalAlign.Top},
-                left: {anchor: "Text", align: HorizontalAlign.Start},
-                right: {anchor: "Text", align: HorizontalAlign.End},
-                bottom : {anchor: "Text", align: VerticalAlign.Bottom},
-              })
-              // .offset({
+              top: { anchor: "Text", align: VerticalAlign.Top },
+              left: { anchor: "Text", align: HorizontalAlign.Start },
+              right: { anchor: "Text", align: HorizontalAlign.End },
+              bottom: { anchor: "Text", align: VerticalAlign.Bottom },
+            })// .offset({
               //   x:-6
               // })
             .id("Image")
 
-            Text('123213123123123')
+          Text(this.publishCommentModel.totalCommentNumer)// Text("44444444")
             .fontSize(8)
             .fontColor('#ffffff')// .backgroundColor('#ED2800')
             .height(12)
+            .textAlign(TextAlign.Center)
             .alignRules({
-                top: {anchor: "__container__", align: VerticalAlign.Top},
-                left: {anchor: "__container__", align: HorizontalAlign.Start}
-              })
-              // .margin({left: 4,right:4
+              top: { anchor: "__container__", align: VerticalAlign.Top },
+              left: { anchor: "__container__", align: HorizontalAlign.Start }
+            })// .margin({left: 4,right:4
               // })
               /*动态计算文字宽度*/
-              .width(50)
-              // .backgroundColor(Color.Green)
+            .width(this.getMeasureText(this.publishCommentModel.totalCommentNumer) + 12)// .backgroundColor(Color.Green)
             .id("Text")
+          // .offset({
+          //   x: 3
+          // })
 
         }
         // }
-
         .offset({
-          x:12
+          x: 12
         })
+
+        // }
       }
     }.width(24).height(24)
+
     // .backgroundColor(Color.Blue)
   }
+
+  private getMeasureText(text: string) {
+
+
+    let width = measure.measureText({
+      textContent: text,
+      fontSize: 8,
+      lineHeight: 12,
+      constraintWidth: DisplayUtils.getDeviceWidth(),
+    })
+    width = px2vp(width)
+    return width
+  }
 }
+