说明

实现下图效果：

分析

难度1：昵称一行，左侧是昵称、右侧是日期
难度2：回复按钮、有用按钮，是图片文本按钮

代码

@Entry
@Component
struct Index {


  build() {
    // 列示布局
    Column(){ // 首字母大写
      Row() {
        Image($r("app.media.startIcon"))
          .width(20)
          .margin({
            right:10,
          })
        Text("李雷") // 用户名
        Blank() // 占满空余空间，注意：有空余空间才生效，即：可能需要设置宽度100%
        Text("11-23")
          .fontColor(Color.Gray)
      }
      .width("100%")
      // .backgroundColor(Color.Red)
      Row() {
        Rating({
          rating: 5,
          indicator: true,
        })
          .height(15)
          .margin({
            right:10
          })
        Text("已购 白色 128GB")
          .fontColor(Color.Gray)
          .fontSize(14)
      }
      .margin({
        top:10,
        bottom:5
      })
      Text("入手苹果16一段时间了，体验超棒！轻薄机身手感好，A18芯片超流畅，4800万像素拍照绝，续航也给力，狠狠爱住！")
        .lineHeight(25)

      Row(){
        Button(){
          Row() {
            Image($r("app.media.startIcon"))
              .width(20)
              .margin({
                right:5
              })
            Text("回复")
          }
        }
          .buttonStyle(ButtonStyleMode.TEXTUAL)
          .fontColor("#444")
          .margin({
            right:20  ,
          })
        Button(){
          Row() {
            Image($r("app.media.startIcon"))
              .width(20)
              .margin({
                right:5
              })
            Text("有用")
          }
        }
          .buttonStyle(ButtonStyleMode.TEXTUAL)
          .fontColor("#444")
      }
      .width("100%")
      .justifyContent(FlexAlign.End)
      .margin({
        bottom:30
      })

    }
    .alignItems(HorizontalAlign.Start)
    .margin({
      left:10,
      right:10,
    })
  }
}

缺点

• 一些样式是重复的。
  解决：使用@Styles装饰器：定义组件重用样式

• 评论不是一条，当有多个评论时，需要复制粘贴大量代码，容易混乱。
  解决：创建自定义组件

• 当评论过多，超过屏幕时，不能滚动。
  解决：使用 List、ListItem 组件

原文出处：/show_1GW2IQ7o1j2Q.html