美文网首页
鸿蒙开发-List及ForEach使用

鸿蒙开发-List及ForEach使用

作者: 激扬飞雪 | 来源:发表于2024-05-18 11:26 被阅读0次
    @Entry
    @Component
    struct ForEachCase {
      @State message: string = 'Hello World'
      @State goodsList: GoodsItem[] = []
    
      aboutToAppear() {
        for (let i = 0; i < 20; i++) {
          this.goodsList.push({
            id: i,
            name: `我是标题我是标题我是标题我是标题我是标题我是标题${i}`,
            price: 100 + i,
            image: 'https://img0.baidu.com/it/u=133911151,872271351&fm=253&fmt=auto&app=138&f=PNG?w=500&h=500'
          })
        }
      }
      build() {
        List({space: 12}){
          ForEach(this.goodsList, (goodsItem: GoodsItem, index: number) => {
            ListItem(){
              Row() {
                Image(goodsItem.image)
                  .width(100)
                  .height(160)
                  .borderRadius(10)
                  Column() {
                    Text(goodsItem.name)
                      .fontWeight(600)
                      .fontSize(14)
                      .fontColor('#666666')
                    Text(`¥${goodsItem.price}`)
                      .fontSize(16)
                      .fontColor(Color.Red)
                  }
                  .justifyContent(FlexAlign.SpaceBetween)
                  .alignItems(HorizontalAlign.Start)
                    .layoutWeight(1)
                  .height(160)
                    .margin({
                      left: 12
                    })
              }
                .width('100%')
            }
          })
    
        }
        .padding({
          left: 12,
          right: 12,
          top: 10,
          bottom: 10
        })
      }
    }
    
    class GoodsItem {
      image: string
      name: string
      price: number
      id: number
    }
    
    image.png

    相关文章

      网友评论

          本文标题:鸿蒙开发-List及ForEach使用

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