视频详情页中标题已经4行的情况下展现全文并可点击展现

@@ -15,6 +15,7 @@ export struct PlayerTitleView {
   @State titleHeight: number = 0
   @State rmhPlatform: number = 0 // 1是人民号
   @State isOverLines: boolean = false
+  @State isTitleOverLines: boolean = false
   @State summary: string = ''
 
   @State private titleLines: number = 0
@@ -92,6 +93,41 @@ export struct PlayerTitleView {
     console.log(TAG, 'clipStr:', clipStr)
     return clipStr
   }
+  /**
+   * 截断文本
+   * @param {string} str   要截断的文本   '啊啊啊啊啊'
+   * @param {number} fontSize  字体大小(px)
+   * @param {number} maxLines  最大行数   3
+   * @param {number} textWidth 文本宽度(px)  vp 需要转换vp2px()
+   * @returns {string} clipStr  截断后的文本 '啊啊'
+   */
+  clipTitleText(str: string, fontSize: number, maxLines: number, textWidth: number): string {
+    let strArr: string[] = str.split("")
+    let truncateContent: string = '啊啊啊啊啊啊' // ...比正常文字宽度更小，这里使用啊啊啊(任意三个文字)代替计算
+    let measureTruncateWidth: number = measure.measureText({
+      textContent: truncateContent,
+      fontSize: fontSize,
+      fontWeight: 600,
+      lineHeight: 20,
+      wordBreak:WordBreak.BREAK_ALL
+    })
+    let clipStr: string = ''
+    for (let i = 0; i < strArr.length; i++) {
+      if (measure.measureText({
+        textContent: clipStr,
+        fontSize: fontSize,
+        fontWeight: 600,
+        lineHeight: 20,
+        wordBreak:WordBreak.BREAK_ALL
+      }) >= textWidth * maxLines - measureTruncateWidth) {
+        this.isTitleOverLines = true
+        break;
+      }
+      clipStr += strArr[i]
+    }
+    console.log(TAG, 'clipTitleText clipStr:', clipStr)
+    return clipStr
+  }
 
   aboutToAppear(): void {
     this.rmhPlatform = this.contentDetailData?.rmhPlatform || 0
@@ -136,19 +172,20 @@ export struct PlayerTitleView {
 
       }
 
-      Text(this.getTitle())
-        .fontColor(Color.White)
-        .fontSize(15)
-        .maxLines(4)
-        .lineHeight(20)
-        .fontWeight(600)
-        .fontFamily('PingFang SC-Regular')
-        .textOverflow({ overflow: TextOverflow.Ellipsis })
-        .margin({ bottom: 2 }) //8
-        .onAreaChange((oldArea: Area, newArea: Area) => {
-          this.titleLines = Math.ceil((newArea.height as number) / 20) // 20是行高
-          this.updateSummaryLines()
-        })
+      // Text(this.getTitle())
+      //   .fontColor(Color.White)
+      //   .fontSize(15)
+      //   .maxLines(4)
+      //   .lineHeight(20)
+      //   .fontWeight(600)
+      //   .fontFamily('PingFang SC-Regular')
+      //   .textOverflow({ overflow: TextOverflow.Ellipsis })
+      //   .margin({ bottom: 2 }) //8
+      //   .onAreaChange((oldArea: Area, newArea: Area) => {
+      //     this.titleLines = Math.ceil((newArea.height as number) / 20) // 20是行高
+      //     this.updateSummaryLines()
+      //   })
+      this.titleBuilder()
       /**
        * 标题大于三行或存在简介显示查看详情按钮
        */
@@ -232,4 +269,51 @@ export struct PlayerTitleView {
     .alignItems(HorizontalAlign.Start)
     .visibility(this.isOpenDetail || this.isDragging ? Visibility.None : Visibility.Visible)
   }
+
+  @Builder
+  titleBuilder() {
+    Text() {
+      Span(this.clipTitleText(this.getTitle(), 14, 4, this.windowWidth - 230 - vp2px(50)))
+        .fontSize(15)
+        .fontColor(Color.White)
+        .lineHeight(20)
+        .fontWeight(600)
+        .fontFamily('PingFang SC-Regular')
+      if (this.isTitleOverLines) {
+        Span('...    全文')
+          .fontColor('#888888')
+          .fontWeight(600)
+          .fontFamily('PingFang SC-Regular')
+          .fontSize(12)
+          .onClick(() => {
+            this.isOpenDetail = true
+            this.dialogController?.open()
+          })
+        ImageSpan($r('app.media.comment_unfold_svg'))
+          .width(14)
+          .height(14)
+          .objectFit(ImageFit.Fill)
+          .verticalAlign(ImageSpanAlignment.BOTTOM)
+          .margin({bottom:1})
+            // .padding({
+            //   bottom: 4
+            // })
+          .onClick(() => {
+            this.isOpenDetail = true
+            this.dialogController?.open()
+          })
+
+      }
+    }
+    .onAreaChange((oldArea: Area, newArea: Area) => {
+      this.titleLines = Math.ceil((newArea.height as number) / 20) // 20是行高
+      this.updateSummaryLines()
+    })
+    .padding({
+      left: 0,//6
+      right: 6,
+      top: 0,//4
+      bottom: 4
+    })
+  }
 }