37、鸿蒙/布局/商品购物卡片

• 实现商品卡片案例

  
  Card.png

案例

@Component
export struct GoodsCard {
  build() {

    Column(){

      Column(){
        //
        // Image($r('app.media.background'))   
    
      Image('https://img01.yzcdn.cn/upload_files/2019/04/22/Fs6S3Cuikasgd9xwOzF3NYgff9Te.png')
          .width('100%')
          .height(160)
          .borderRadius({
            topLeft: 5,
            topRight: 5
          })
        //
        Text('商品标题商品标题商品标题商品标题')
          .padding({
            top: 12
          })
        //
        Row(){
          Text('圆梦人生')
            .fontColor('#999')
            .fontSize(14)
            .layoutWeight(1)
          Text('数量:2300')
            .fontColor('#999')
            .fontSize(14)
        }.width('100%')
        .justifyContent(FlexAlign.SpaceBetween)
        .padding({
          top: 20,
          left: 10,
          right: 10
        })
      }
      .margin({
        top: 16
      })
      .borderRadius(5)
      .width(200)
      .padding({
        bottom: 20
      })
      .backgroundColor(Color.White)

    }.width('100%')
    .height('100%')
    .backgroundColor(Color.Gray)

  }
}