鸿蒙移动应用开发--UI布局基础

实验要求：
        从小红书、大众点评等app中，任意找一个类似下图的卡片进行实现，照着卡片格式做个一样的UI界面。

源代码：

@Entry
@Component
struct demo1 {
  @State message: string = 'Hello World';

  build() {
    Column() {
      Row() {
        Column() {
          Row() {
            Image($r('app.media.product')).width(200)
          }
          Row() {
            Image('https://www.xiaohongshu.com/explore').width(200)
          }
        }
      }

      Row() {
        Text('  坐观星移如弈子，清明若月照空庭')
          .maxLines(3)
          .textOverflow({ overflow: TextOverflow.Ellipsis })
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
          .width(200)
      }

      Row() {
        Column() {
          Image($r('app.media.avatar')).width(45)
        }

        Column() {
          Row() {
            Column() {
              Text('安自在Zz')
              Text('01-28')
            }
          }
        }

        Column() {
          Row() {
            Image($r('app.media.heart')).width(25).fillColor(Color.Red)
            Text('2.9万')

          }
        }
      }
    }
  }
}

运行结果：

附件：

app.media.product

    app.media.avatar 

app.media.heart