35、鸿蒙/布局/商品列表案例

• 案例：在布局案例中经常会使用到商品列表功能，此文针对该案例进行实现；
• 思路：实现移动端商品列表Item效果，首先使用列(Column)布局，其次内部布局分为左右，再使用行(Row)布局，左边商品标题和商品描述组合在一起，右边区域为商品图标，代码如下：

效果图

代码：

@Component
export struct GoodsLayout {
  build() {
    Column(){
      Row(){
        // 左边
        Column({ space: 10 }){
          Text('商品名称')
            .fontSize(22)
          Text('商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述')
            .fontColor('#d1d1d1')
            .maxLines(1)
            .textOverflow({ overflow: TextOverflow.Ellipsis })
        }.alignItems(HorizontalAlign.Start)
          // .width(280)
          .layoutWeight(1)
        // 右边
        Row({  space: 10 }){
          Image($r('app.media.startIcon'))
            .height(50)
        }.width(50)
      }.height(80).width('100%')
      .padding({left: 16, right: 16})
      .justifyContent(FlexAlign.SpaceBetween)
      .backgroundColor(Color.White)
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#ccc')
  }
}