HarmonyOS NEXT鸿蒙开发：案例：京东评论列表（一）-马育民老师

# 说明

实现下图效果：

[![](https://www.malaoshi.top/upload/0/0/1GW2IQ45BwpJ.jpg)](https://www.malaoshi.top/upload/0/0/1GW2IQ45BwpJ.jpg)

### 分析

难度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装饰器：定义组件重用样式](https://www.malaoshi.top/show_1GW4deUX44s.html "使用@Styles装饰器：定义组件重用样式")

- 评论不是一条，当有多个评论时，需要复制粘贴大量代码，容易混乱。
**解决：**[创建自定义组件](https://www.malaoshi.top/show_1GW1QfElTpD.html "创建自定义组件")

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

原文出处：http://malaoshi.top/show_1GW2IQ7o1j2Q.html