鸿蒙开发笔记06---列表布局

最新推荐文章于 2024-10-05 07:39:03 发布

FCC998

最新推荐文章于 2024-10-05 07:39:03 发布

阅读量253

点赞数 2

分类专栏：鸿蒙开发笔记文章标签：笔记

本文链接：https://blog.csdn.net/m0_64346512/article/details/137378458

版权

鸿蒙开发笔记专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1、简介

2、代码示例

class Item{
  name : String
  image:ResourceStr
  price:number
  discount:number

  constructor(name:String,image:ResourceStr,price:number,discount:number =0) {
    this.name = name
    this.image  =image
    this.price = price
    this.discount = discount
  }
}


@Entry
@Component
struct ItemPage {
//商品数据

  private  items: Array<Item> = [

     new Item('华为Mate60',$r('app.media.phone1'),6999,500),
     new Item('华为Mate60',$r('app.media.phone1'),7999),
     new Item('华为Mate60',$r('app.media.phone1'),8999),
     new Item('华为Mate60',$r('app.media.phone1'),5999),
     new Item('华为Mate60',$r('app.media.phone1'),6569),
    new Item('华为Mate60',$r('app.media.phone1'),6569),
    new Item('华为Mate60',$r('app.media.phone1'),6569),
    new Item('华为Mate60',$r('app.media.phone1'),6569)

  ]


build(){
  Column({space:8}){
    Row(){
      Text('百亿补贴')
        .fontSize(30)
        .fontWeight(FontWeight.Bold)
        .fontColor('red')
    }
    .width('100%')
    .height(30)
    .margin({bottom:20})

    List({space:8}){
      ForEach(
        this.items,
        (item:Item )=>{
          ListItem(){
            Row({space:10}){
              Image(item.image)
                .width(100)
              Column({space:4}){
                if(item.discount){
                  Text('华为Mater40')
                    .fontSize(20)
                    .fontWeight(FontWeight.Bold)
                  Text('原价：￥'+item.price)
                    .fontColor('#ccc')
                    .fontSize(14)
                    .decoration({type:TextDecorationType.LineThrough})
                  Text('折扣价：￥'+(item.price-item.discount))
                    .fontColor('#F36')
                    .fontSize(18)
                  Text('补贴￥'+item.discount)
                    .fontColor('#F36')
                    .fontSize(18)

                }else{
                  Text('华为Mater40')
                    .fontSize(20)
                    .fontWeight(FontWeight.Bold)
                  Text('￥'+item.price)
                    .fontColor('#F36')
                    .fontSize(18)
                }

              }

            }
            .width('100%')
            .height(120)
            .backgroundColor('#FFF')
            .borderRadius(20)
            .padding(10)
          }
          }

      )
    }
    .width('100%')
    .layoutWeight(1)


  }
  .width('100%')
  .height('100%')
  .backgroundColor('#EFEFEFF')
  .padding(20)
}
}