ref |> 调整直播详情直播间tab布局UI走查问题

@@ -15,63 +15,66 @@ export struct TabLiveItemComponent {
   }
 
   build() {
-    Row() {
-      Image(StringUtils.isEmpty(this.item.senderUserAvatarUrl) ? $r('app.media.default_head') : this.item.senderUserAvatarUrl)
-        .borderRadius(90)
-        .width(24)
-        .height(24)
-
-      Column() {
-        Row() {
-          Text(this.item.senderUserName)
-            .maxLines(1)
-            .textOverflow({ overflow: TextOverflow.Ellipsis })
-            .fontSize('14vp')
-            .fontWeight(400)
-            .fontColor('#222222')
-          Text(this.item.role === 'host' ? '主持人' : '嘉宾')
-            .maxLines(1)
-            .textOverflow({ overflow: TextOverflow.Ellipsis })
-            .fontSize('11vp')
-            .fontWeight(400)
-            .fontColor('#968562')
-            .backgroundColor('#F1EFEB')
-            .padding({
-              left: 4,
-              top: 1,
-              right: 4,
-              bottom: 1
-            })
-            .borderRadius(2)
-            .margin({ left: 8 })
-            .visibility(StringUtils.isNotEmpty(this.item.role) ? Visibility.Visible : Visibility.None)
-
-          Text(DateTimeUtils.getCommentTime(new Date(this.item.time).getTime()))
-            .maxLines(1)
-            .textOverflow({ overflow: TextOverflow.Ellipsis })
-            .fontSize('12vp')
-            .fontWeight(400)
-            .fontColor('#999999')
-            .margin({ left: 8 })
-            .visibility(StringUtils.isNotEmpty(this.item.time) ? Visibility.Visible : Visibility.None)
+    Column() {
+      Row() {
+        Image(StringUtils.isEmpty(this.item.senderUserAvatarUrl) ? $r('app.media.default_head') : this.item.senderUserAvatarUrl)
+          .borderRadius(90)
+          .width(24)
+          .height(24)
+          .id("senderUserAvatar")
+        Text(this.item.senderUserName)
+          .maxLines(1)
+          .textOverflow({ overflow: TextOverflow.Ellipsis })
+          .fontSize('14vp')
+          .fontWeight(400)
+          .fontColor('#222222')
+          .alignRules({center:{anchor:"senderUserAvatar",align:VerticalAlign.Center}})
+          .margin({left:8})
+        Text(this.item.role === 'host' ? '主持人' : '嘉宾')
+          .maxLines(1)
+          .textOverflow({ overflow: TextOverflow.Ellipsis })
+          .fontSize('11vp')
+          .fontWeight(400)
+          .fontColor('#968562')
+          .backgroundColor('#F1EFEB')
+          .padding({
+            left: 4,
+            top: 1,
+            right: 4,
+            bottom: 1
+          })
+          .borderRadius(2)
+          .margin({ left: 8 })
+          .visibility(StringUtils.isNotEmpty(this.item.role) ? Visibility.Visible : Visibility.None)
 
-          Text('置顶')
-            .fontSize('11vp')
-            .fontWeight(400)
-            .fontColor('#ED2800')
-            .backgroundColor('#F1EFEB')
-            .padding({
-              left: 4,
-              top: 1,
-              right: 4,
-              bottom: 1
-            })
-            .borderRadius(2)
-            .margin({ left: 8 })
-            .width(100)
-            .visibility(1 == this.item.isTop ? Visibility.Visible : Visibility.None)
-        }
+        Text(DateTimeUtils.getCommentTime(new Date(this.item.time).getTime()))
+          .maxLines(1)
+          .textOverflow({ overflow: TextOverflow.Ellipsis })
+          .fontSize('12vp')
+          .fontWeight(400)
+          .fontColor('#999999')
+          .margin({ left: 8 })
+          .visibility(StringUtils.isNotEmpty(this.item.time) ? Visibility.Visible : Visibility.None)
 
+        Text('置顶')
+          .fontSize('11vp')
+          .fontWeight(400)
+          .fontColor('#ED2800')
+          .backgroundColor('#F1EFEB')
+          .padding({
+            left: 4,
+            top: 1,
+            right: 4,
+            bottom: 1
+          })
+          .borderRadius(2)
+          .margin({ left: 8 })
+          .width(100)
+          .visibility(1 == this.item.isTop ? Visibility.Visible : Visibility.None)
+      }
+      .justifyContent(FlexAlign.Start)
+      .width("100%")
+      Column() {
         Text(this.item.text)
           .fontSize('14vp')
           .fontWeight(400)
@@ -91,14 +94,14 @@ export struct TabLiveItemComponent {
                 if (this.item.pictureUrls.length > 1) {
                   Image(itemSub)
                     .width(`${100 / this.item.pictureUrls.length}%`)
-                    // .height(70)
+                      // .height(70)
                     .objectFit(ImageFit.Contain)
                     .borderRadius(4)
                 } else {
                   Image(itemSub)
                     .width(`100%`)
-                    // .aspectRatio(this.getAspectRation())
-                    // .height(177)
+                      // .aspectRatio(this.getAspectRation())
+                      // .height(177)
                     .objectFit(ImageFit.Contain)
                     .borderRadius(4)
                 }
@@ -171,17 +174,16 @@ export struct TabLiveItemComponent {
         }
       }
       .margin({
-        left: 8,
-        right: 16
+        left: 32,
       })
-      .layoutWeight(1)
       .alignItems(HorizontalAlign.Start)
+      .justifyContent(FlexAlign.Start)
     }
-    .alignItems(VerticalAlign.Top)
     .padding({
       left: 17,
-      top: 8,
-      bottom: 8,
+      top: 12,
+      right: 16,
+      bottom: 4,
     })
   }