鸿蒙开发学习笔记——渲染控制_鸿蒙怎么做list数据渲染点击每一个listitem跳转到对应数据界面

1.ForEach:循环便遍历数组，根据数组内容渲染组件

ForEach(
    arr: Array,    // 1.要遍历的数据数组
    (item: any, index: number) => {
        // 2.页面组件生成函数
    },
    KeyGenerator?: (item:any, index?: number): string => {
        // 3.键生成函数，为数组每一项生成一个唯一标示，组件是否重新渲染的判断标准 可以不写直接用默认的
    }
)

实例：

已有资源：

都是我在华为官网找的图片和价格，下载到media文件中。 

要实现下面商品展示效果

先分析页面布局，红为列或单个元素，蓝为行

单个商品布局代码：

Row(){
    Iamge()
    Cloumn(){
        Text()
        Text()
    }
}

定义商品类

// 定义商品类
class Item{
  name: string
  image: ResourceStr
  price: number
 
  constructor(name: string, image: ResourceStr, price: number) {
    this.name = name
    this.image = image
    this.price = price
  }
}

 实例化

private items: Array<Item> = [
    new Item('Pocket系列',$r('app.media.Pocket'),7499),
    new Item('Mate系列',$r('app.media.Mate'),6499),
    new Item('P系列',$r('app.media.P'),6988),
    new Item('nova系列',$r('app.media.nova'),4699),
    new Item('畅想系列',$r('app.media.nav'),1499)
  ]

完整代码如下：

// 定义商品类
class Item{
  name: string
  image: ResourceStr
  price: number
 
  constructor(name: string, image: ResourceStr, price: number) {
    this.name = name
    this.image = image
    this.price = price
  }
}
 
@Entry
@Component
struct Index {
  private items: Array<Item> = [
    new Item('Pocket系列',$r('app.media.Pocket'),7499),
    new Item('Mate系列',$r('app.media.Mate'),6499),
    new Item('P系列',$r('app.media.P'),6988),
    new Item('nova系列',$r('app.media.nova'),4699),
    new Item('畅想系列',$r('app.media.nav'),1499)
  ]
 
  build() {
    Column({space: 8}){
      Row(){
        Text('商品列表')
          .fontSize(30)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
      .margin({bottom: 20})
 
      // 商品渲染
      ForEach(
        this.items,
        // 也可以写成item => {}，但因为传进来的item类型为any，所以没有提示，声明变量类型后就有提示了
        (item: Item) => {
          Row({space: 10}){
            Image(item.image)
              .width(100)
            Column({space: 4}){
              Text(item.name)
                .fontSize(20)
                .fontWeight(FontWeight.Bold)
              Text('￥'+item.price)
                .fontColor('#F36')
                .fontSize(18)
            }
            .height('100%')
            .alignItems(HorizontalAlign.Start)
          }
          .width('100%')
          .backgroundColor('#FFF')
          .borderRadius(20)
          .height(120)
          .padding(10)
 
        }
      )
    }
    .width('100%')
    .height('100%')
  }
}

2.if else：条件控制，根据数据状态的不同，渲染不同的页面组件

if(判断条件){
 
        // 内容A
 
}else{
 
        // 内容B
 
}

在上面的基础上，如果有些商品打折，则需要不同的渲染方式，用if else可实现，效果图如下：

首先修改商品类定义：

// 定义商品类
class Item{
  name: string
  image: ResourceStr
  price: number
  discount: number
 
  // discount初始化为0
  constructor(name: string, image: ResourceStr, price: number, discount: number = 0) {
    this.name = name
    this.image = image
    this.price = price
    this.discount = discount
  }
}

 实例化也修改

  private items: Array<Item> = [
    new Item('Pocket系列',$r('app.media.Pocket'),7499,500),
    new Item('Mate系列',$r('app.media.Mate'),6499),
    new Item('P系列',$r('app.media.P'),6988),
    new Item('nova系列',$r('app.media.nova'),4699),
    new Item('畅想系列',$r('app.media.nav'),1499)
  ]

完整代码如下：

// 定义商品类
class Item{
  name: string
  image: ResourceStr
  price: number
  discount: number
 
  // discount初始化为0
  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 Index {
  private items: Array<Item> = [
    new Item('Pocket系列',$r('app.media.Pocket'),7499,500),
    new Item('Mate系列',$r('app.media.Mate'),6499),
    new Item('P系列',$r('app.media.P'),6988),
    new Item('nova系列',$r('app.media.nova'),4699),
    new Item('畅想系列',$r('app.media.nav'),1499)
  ]
 
  build() {
    Column({space: 8}){
      Row(){
        Text('商品列表')
          .fontSize(30)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
      .margin({bottom: 20})
 
      // 商品渲染
      ForEach(
        this.items,
        // 也可以写成item => {}，但因为传进来的item类型为any，所以没有提示，声明变量类型后就有提示了
        (item: Item) => {
          Row({space: 10}){
            Image(item.image)
              .width(100)
            Column({space: 4}){
              // 如果有折扣 渲染只有这里有变化
              if (item.discount) {
                Text(item.name)
                  .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(item.name)
                  .fontSize(20)
                  .fontWeight(FontWeight.Bold)
                Text('￥'+item.price)
                  .fontColor('#F36')
                  .fontSize(18)
              }
            }
            .height('100%')
            .alignItems(HorizontalAlign.Start)
          }
          .width('100%')
          .backgroundColor('#FFF')
          .borderRadius(20)
          .height(120)
          .padding(10)
        }
      )
    }
    .width('100%')
    .height('100%')
  }
}