【练习】使用DevEco Studio编写鸿蒙代码，实现卡片效果，主要是练习布局

效果展示

实现代码

build() {
    Column(){
      Column(){
        Image($r("app.media.avatar"))
          .width("100%")
          .borderRadius({
            topLeft:10,
            topRight:10
          })
          Text("今晚吃这个 | 每日艺术分享 No.43")
            .fontSize(14)
            .fontWeight(600)
            .lineHeight(22)
            .height(60)
          Row(){
            Row({space:6}){
              Image($r("app.media.app_icon"))
                .width(20)
                .borderRadius(10)//宽度的一半就是正圆
              Text("插画师分享聚集地")
                .fontSize(10)
                .fontColor("#999")
            }
              .layoutWeight(1)
            Row(){
              Image($r("app.media.zan"))
                .width(20)
                .fillColor("#999")
              Text("2300")
                .fontSize(10)
                .fontColor("#666")
            }
          }
          .padding({
            left:15,
            right:15,
            bottom:10
          })
          .width("100%")
          .justifyContent(FlexAlign.SpaceBetween)
      }
      .width(200)
      .borderRadius(10)
      .backgroundColor("#fff")
    }
    .height('100%')
    .width('100%')
    .backgroundColor("#ccc")
    .padding(20)
  }