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

作者: 圆梦人生 | 来源:发表于2024-07-25 09:13 被阅读0次
  • 案例:在布局案例中经常会使用到商品列表功能,此文针对该案例进行实现;
  • 思路:实现移动端商品列表Item效果,首先使用列(Column)布局,其次内部布局分为左右,再使用行(Row)布局,左边商品标题和商品描述组合在一起,右边区域为商品图标,代码如下:

效果图

Goods.png

代码:

@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')
  }
}

相关文章

网友评论

    本文标题:35、鸿蒙/布局/商品列表案例

    本文链接:https://www.haomeiwen.com/subject/prakhjtx.html