梅科尔工作室-王柯竣-鸿蒙笔记3_lazyforeach循环渲染可以使用在以下哪些容器组件中( )。

基础知识方面：

由list容器组件和listitem容器组件构成，list是一个大容器，listitem是大容器里的小容器

使用说明

示例

渲染控制：

ArkTS也提供了渲染控制的能力。条件渲染可根据应用的不同状态，渲染对应状态下的UI内容。循环渲染可从数据源中迭代获取数据，并在每次迭代过程中创建相应的组件。

条件渲染：

使用if/else进行条件渲染。

Column() {
  if (this.count < 0) {
    Text('count is negative').fontSize(14)
  } else if (this.count % 2 === 0) {
    Text('count is even').fontSize(14)
  } else {
    Text('count is odd').fontSize(14)
  }
}

循环渲染：

通过循环渲染（ForEach）从数组中获取数据，并为每个数据项创建相应的组件，可减少代码复杂度。

ForEach(
  arr: any[], 
  itemGenerator: (item: any, index?: number) => void,
  keyGenerator?: (item: any, index?: number) => string 
)

参数：

示例：

// xxx.ets
@Entry
@Component
struct MyComponent {
  @State arr: number[] = [10, 20, 30]
 
  build() {
    Column({ space: 5 }) {
      Button('Reverse Array')
        .onClick(() => {
          this.arr.reverse()
        })
 
      ForEach(this.arr, (item: number) => {
        Text(`item value: ${item}`).fontSize(18)
        Divider().strokeWidth(2)
      }, (item: number) => item.toString())
    }
  }
}

数据懒加载

通过数据懒加载（LazyForEach）从提供的数据源中按需迭代数据，并在每次迭代过程中创建相应的组件。

LazyForEach(
  dataSource: IDataSource,             
  itemGenerator: (item: any) => void,  
  keyGenerator?: (item: any) => string 
): void
 
interface IDataSource {
  totalCount(): number;                                           
  getData(index: number): any;                                   
  registerDataChangeListener(listener: DataChangeListener): void;   
  unregisterDataChangeListener(listener: DataChangeListener): void;
}
 
interface DataChangeListener {
  onDataReloaded(): void;                      
  onDataAdd(index: number): void;            
  onDataMove(from: number, to: number): void; 
  onDataDelete(index: number): void;         
  onDataChange(index: number): void;          
}

IDataSource类型说明

DataChangeListener类型说明

示例：

// xxx.ets
class BasicDataSource implements IDataSource {
  private listeners: DataChangeListener[] = []
 
  public totalCount(): number {
    return 0
  }
 
  public getData(index: number): any {
    return undefined
  }
 
  registerDataChangeListener(listener: DataChangeListener): void {
    if (this.listeners.indexOf(listener) < 0) {
      console.info('add listener')
      this.listeners.push(listener)
    }
  }
 
  unregisterDataChangeListener(listener: DataChangeListener): void {
    const pos = this.listeners.indexOf(listener);
    if (pos >= 0) {
      console.info('remove listener')
      this.listeners.splice(pos, 1)
    }
  }
 
  notifyDataReload(): void {
    this.listeners.forEach(listener => {
      listener.onDataReloaded()
    })
  }
 
  notifyDataAdd(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataAdd(index)
    })
  }
 
  notifyDataChange(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataChange(index)
    })
  }
 
  notifyDataDelete(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataDelete(index)
    })
  }
 
  notifyDataMove(from: number, to: number): void {
    this.listeners.forEach(listener => {
      listener.onDataMove(from, to)
    })
  }
}
 
class MyDataSource extends BasicDataSource {
  // 初始化数据列表
  private dataArray: string[] = ['/path/image0.png', '/path/image1.png', '/path/image2.png', '/path/image3.png']
 
  public totalCount(): number {
    return this.dataArray.length
  }
 
  public getData(index: number): any {
    return this.dataArray[index]
  }
 
  public addData(index: number, data: string): void {
    this.dataArray.splice(index, 0, data)
    this.notifyDataAdd(index)
  }
 
  public pushData(data: string): void {
    this.dataArray.push(data)
    this.notifyDataAdd(this.dataArray.length - 1)
  }
}
 
@Entry
@Component
struct MyComponent {
  private data: MyDataSource = new MyDataSource()
 
  build() {
    List({ space: 3 }) {
      LazyForEach(this.data, (item: string) => {
        ListItem() {
          Row() {
            Image(item).width(50).height(50)
            Text(item).fontSize(20).margin({ left: 10 })
          }.margin({ left: 10, right: 10 })
        }
        .onClick(() => {
          // 每点击一次列表项，数据增加一项
          this.data.pushData('/path/image' + this.data.totalCount() + '.png')
        })
      }, item => item)
    }
  }
}

本次作业：

列表示例：

@Entry
@Component
struct zuoye3 {
  build() {
    Column(){
      List( ) {
        ListItem(){
          Text("示例1")
            .fontSize(30).width("100%").height("10%").backgroundColor("#DCDCDC")
        }
        ListItem(){
          Text("示例2")
            .fontSize(30).width("100%").height("10%").backgroundColor("#BABABA")
        }
        ListItem(){
          Text("示例3")
            .fontSize(30) .width("100%").height("10%").backgroundColor("#BDDB")
        }
        ListItem(){
          Text("示例4")
            .fontSize(30).width("100%").height("10%").backgroundColor("#1264")
        }
      }
 
 
    }
    .width("100%").height("100%").justifyContent(FlexAlign.Center)
  }
}

if-else-else if示例：

//import {child} from"../applicationability/child"
@Entry
@Component
struct zuoye5{
 @State fathernum : number= -1
 
  build(){
    Column(){
      Column(){
        if(this.fathernum%2===0){
          Text('count is negative')
            .fontSize(50)
            .fontWeight(FontWeight.Bold)
        }
        else if(this.fathernum%3===0){
          Text('even')
            .fontSize(50)
            .fontWeight(FontWeight.Bold)
        } else{
          Text('odd')
            .fontSize(50)
            .fontWeight(FontWeight.Bold)
        }
      }
 
    }
    .width("100%").height("100%").justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center)
  }
}

讲解：if-else组件必须在容器组件内使用。特别需要注意的一点是对于fathernum的赋值情况：其中的

number= -1不可少，因为加了number才能够确定fathernum才有类型。我做的时候犯的错误有，没加number，以及写成了：@State fathernum : number= “-1”，这里是不需要加引号的。

循环渲染示例：

@Entry
@Component
struct zuoye4 {
  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]  // 一个列表
 
  build() {
    Column() {
      Column() {
        List({ space: 20 }) {
          //for循环渲染出10个Listitem小列表
          ForEach(this.arr, (item) => {
            ListItem() {
              //使列表里面的元素转化为字符串出现到文本里
              Text(item.toString())
//                设置长度
                .width('100%')
//                设置宽度
                .height(90)
//                  文字大小
                .fontSize(36)
//                  文字居中
                .textAlign(TextAlign.Center)
//                  背景颜色
                .backgroundColor("#007DEF")
//              使ListItem出现圆角
                .borderRadius(30)
            }
          })
        }
//                    排列方向
        .listDirection(Axis.Vertical)
 
      }
      .width("90%")
      .height('90%')
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.SpaceAround)
 
 
  }
}

这里需要注意的是：要设置排列的方向 .listDirection(Axis.Vertical)不可少

父子组件：

父组件：

import{child} from"../applicationability/child"
@Entry
@Component
struct zuoye6{
  //设fathernum为number类型值为0
  @State fathernum:number = 0
  //设fatherstatu为boolean类型值为true
  @State fatherstatu:boolean = true
  build() {
    Row() {
      Column() {
        child({ childnum: $fathernum,childnum1:$fatherstatu})
      }
      .width('100%')
    }
    .height('100%')
  }
}

子组件：

@Component
export struct child{  //导出
  @Link childnum:number
  @Link childnum1:boolean
  build() {
    Column({space:10}) {
      //布尔类型：如果真执行，如果假则不执行；真假由childnum1的值决定
      if(this.childnum1){
        //进行字符的转换
        Text(this.childnum.toString())
          .fontSize(80)
          .fontColor(Color.Red)
      }
      //设置一个按钮
      Button('增加')
        .width(200).height(90)
        .fontSize(30)
           //设置点击事件
        .onClick(()=>{
//          每点击一次，childnum+1
          this.childnum++
        })
      Button('减少')
        .width(200).height(90)
        .fontSize(30)
        .onClick(()=>{
          //点击后childnum的值减1
          this.childnum--
        })
      Button('归零')
        .width(200).height(90)
        .fontSize(30)
        .onClick(()=>{
//          点击之后归零
          this.childnum = 0
        })
      Button('显示')
        .width(200).height(90)
        .fontSize(30)
        .onClick(()=>{
          //开关设置，也就是辨别真假
          this.childnum1 =! this.childnum1
        })
    }
  }
}