鸿蒙开发系列教程（二十七）--案例：商品评价

1、商品评价标题

2、商品评价内容

3、整合调用

4、参考完整代码

@Entry
@Component
struct main {

  build() {
    Column () {
      EvaluationTitle()
      EvaluationItem()
    }
  }
}

@Component
struct EvaluationTitle {
  build() {
    Row(){
      Row() {
        Image($r("app.media.a6"))
          .width(16)
          .height(16)
          .fillColor('#848484')
      }
      .justifyContent(FlexAlign.Center)
      .width(24)
      .aspectRatio(1)
      .backgroundColor("#ffb9b3bc")
      .borderRadius(12)
      .margin({
        left: 15
      })
      Text("商品评价")
        .layoutWeight(1)
        .textAlign(TextAlign.Center)
        .fontSize(18)
        .padding({
          right: 39
        })
    }
    .height(40)
    .border({
      color: '#ffde3b3b',
      width: {
        bottom: 0.5
      }
    })
  }
}

@Component
struct EvaluationItem {
  build() {
    Row() {
      // 头像
      Image('/assets/test.jpeg')
        .width(32)
        .aspectRatio(1)
        .borderRadius(16)
      // 评论内容
      Column({ space: 10 }) {
        Text("用户36110")
          .fontWeight(FontWeight.Bold)
        Text("兔粮兔子饲料兔子粮食幼兔兔粮荷兰猪饲料提摩西兔草宠物兔子用品，兔子很爱吃！")
          .lineHeight(20)
          .fontSize(16)
          .fontColor('#565656')

        Row() {
          Text("2024-03-19 .ip属地哈尔滨")
            .fontSize(16)
            .fontColor("#c3c4c5")
          Row() {
            Image($r("app.media.a8"))
              .width(12)
              .aspectRatio(1)
              .fillColor('#c3c4c5')
              .margin({
                right: 5
              })
            Text("300")
              .fontSize(12)
              .fontColor("#c3c4c5")
          }
        }.justifyContent(FlexAlign.SpaceBetween)
        .width('100%')
      }
      .alignItems(HorizontalAlign.Start)
      .layoutWeight(1)
      .margin({
        left: 10
      })
    }.padding(15)
    .alignItems(VerticalAlign.Top)
    .backgroundColor("#fff5f2dc")
  }
}