鸿蒙NEXT开发-界面渲染（条件和循环）

时间：2025-02-17 10:44:14

 注意：博主有个鸿蒙专栏，里面从上到下有关于鸿蒙next的教学文档，大家感兴趣可以学习下

如果大家觉得博主文章写的好的话，可以点下关注，博主会一直更新鸿蒙next相关知识

目录

1. 渲染-条件渲染

1.1 基本介绍

1.2 使用if/else（创建销毁元素）

1.3 visibility属性控制

2. 渲染-循环渲染

2.1 基本介绍

2.2 首次渲染

2.3 非首次渲染

1. 渲染-条件渲染

1.1 基本介绍

在ArkTS中 我们要根据某个状态来控制元素或者组件的显示隐藏 可以采用条件渲染

1.2 使用if/else（创建销毁元素）

使用规则如下：

  • 支持if、else和else if语句。

  • if、else if后跟随的条件语句可以使用状态变量。

  • 允许在容器组件内使用，通过条件渲染语句构建不同的子组件。

  • 条件渲染语句在涉及到组件的父子关系时是“透明”的，当父组件和子组件之间存在一个或多个if语句时，必须遵守父组件关于子组件使用的规则。

  • 每个分支内部的构建函数必须遵循构建函数的规则，并创建一个或多个组件。无法创建组件的空构建函数会产生语法错误。

  • 某些容器组件限制子组件的类型或数量，将条件渲染语句用于这些组件内时，这些限制将同样应用于条件渲染语句内创建的组件。例如，Grid容器组件的子组件仅支持GridItem组件，在Grid内使用条件渲染语句时，条件渲染语句内仅允许使用GridItem组件。

代码示例

@Entry
  @Component
  struct Index {

    @State isShow:boolean=true
    build() {
      Column() {
        Button('显示/隐藏')
          .width(100)
          .height(30)
          .onClick(()=>{
            if(this.isShow){
              this.isShow=false
            }else{
              this.isShow=true
            }
          })
        if(this.isShow){
          Text('我是东林').width(200).height(200).fontSize(40)
        }
      }.width('100%')
        .height('100%')
    }
  }

1.3 visibility属性控制

visibility属性有以下三种：

1、Visible 显示

2、Hidden 隐藏

3、None 隐藏，但是不占位置

代码示例

@Entry
  @Component
  struct Index {

    @State isShow:boolean=true
    build() {
      Column() {
        Button('显示/隐藏')
          .width(100)
          .height(30)
          .onClick(()=>{
            if(this.isShow){
              this.isShow=false
            }else{
              this.isShow=true
            }
          })
        Text('我是东林').width(200).height(200).fontSize(40)
          .backgroundColor(Color.Green)
          .visibility(this.isShow?Visibility.Visible:Visibility.Hidden)

        Text('小头').width(200).height(200).fontSize(40)
          .backgroundColor(Color.Yellow)
      }.width('100%')
        .height('100%')
    }
  }

2. 渲染-循环渲染

2.1 基本介绍

循环渲染使用 ForEach方法来进行

ForEach接口基于数组类型数据来进行循环渲染，需要与容器组件配合使用，且接口返回的组件应当是允许包含在ForEach父容器组件中的子组件。例如，ListItem组件要求ForEach的父容器组件必须为List组件。

官方参考文档

文档中心

语法结构

ForEach(
  // 数据源
  arr: Array,
  // 组件生成函数
  itemGenerator: (item: 单项, index?: number) => void,
    // 键值生成函数
    keyGenerator?: (item: 单项, index?: number): string => string
                 )

arr：必填，是需要渲染的组件的数据源。

itemGenerator：必填，是组件生成函数。

keyGenerator: 可选，是键值生成函数（确定唯一性）

在ForEach循环渲染过程中，系统会为每个数组元素生成一个唯一且持久的键值，用于标识对应的组件。当这个键值变化时，ArkUI框架将视为该数组元素已被替换或修改，并会基于新的键值创建一个新的组件。

ForEach提供了一个名为keyGenerator的参数，这是一个函数，开发者可以通过它自定义键值的生成规则。如果开发者没有定义keyGenerator函数，则ArkUI框架会使用默认的键值生成函数，即(item: any, index: number) => { return index + '__' + JSON.stringify(item); }。

代码示例

import FruitModel from '../model/FruitModel';

@Entry
  @Component
  struct Index {
    @State fruits: FruitModel[]=[new FruitModel('1','苹果','100')
                                 ,new FruitModel('2','香蕉','90'),
                                 new FruitModel('3','西瓜','200')];

    build() {
      Row() {
        Column() {
          ForEach(this.fruits, (item: FruitModel) => {
            Text(`${item.id}:${item.name}:${item.vote}`)
              .width(200)
              .height(200)
          }, (item: FruitModel) => item.id)
        }
        .width('100%')
          .height('100%')
      }
      .height('100%')
    }
  }

2.2 首次渲染

在ForEach首次渲染时，会根据前述键值生成规则为数据源的每个数组项生成唯一键值，并创建相应的组件。

@Entry
@Component
struct Index {
  @State simpleList: Array<string> = ['苹果', '香蕉', '西瓜'];

  build() {
    Row() {
      Column() {
        ForEach(this.simpleList, (item: string) => {
          ChildItem({ item: item })
        }, (item: string) => item)
      }
      .width('100%')
      .height('100%')
    }
    .height('100%')
  }
}

@Component
struct ChildItem {
  @Prop item: string;

  build() {
    Text(this.item)
      .fontSize(50)
  }
}

在上述代码中，键值生成规则是keyGenerator函数的返回值item。在ForEach渲染循环时，为数据源数组项依次生成键值苹果、香蕉和西瓜，并创建对应的ChildItem组件渲染到界面上。

当不同数组项按照键值生成规则生成的键值相同时，框架的行为是未定义的。例如，在以下代码中，ForEach渲染相同的数据项香蕉时，只创建了一个ChildItem组件，而没有创建多个具有相同键值的组件。

@Entry
  @Component
  struct Index {
    @State simpleList: Array<string> = ['苹果', '香蕉', '香蕉','西瓜'];

    build() {
      Row() {
        Column() {
          ForEach(this.simpleList, (item: string) => {
            ChildItem({ item: item })
          }, (item: string) => item)
        }
        .width('100%')
          .height('100%')
      }
      .height('100%')
    }
  }

@Component
  struct ChildItem {
    @Prop item: string;

    build() {
      Text(this.item)
        .fontSize(50)
    }
  }

在该示例中，最终键值生成规则为item。当ForEach遍历数据源simpleList，遍历到索引为1的香蕉时，按照最终键值生成规则生成键值为香蕉的组件并进行标记。当遍历到索引为2的香蕉时，按照最终键值生成规则当前项的键值也为香蕉，此时不再创建新的组件。

2.3 非首次渲染

在ForEach组件进行非首次渲染时，它会检查新生成的键值是否在上次渲染中已经存在。如果键值不存在，则会创建一个新的组件；如果键值存在，则不会创建新的组件，而是直接渲染该键值所对应的组件。例如，在以下的代码示例中，通过点击事件修改了数组的第三项值为"西瓜test"，这将触发ForEach组件进行非首次渲染。

@Entry
  @Component
  struct Index {
    @State simpleList: Array<string> = ['苹果', '香蕉','西瓜'];

    build() {
      Row() {
        Column() {
          Text('点击修改第3个数组项的值')
            .fontSize(24)
            .fontColor(Color.Red)
            .onClick(() => {
              this.simpleList[2] = '西瓜test';
            })

          ForEach(this.simpleList, (item: string) => {
            ChildItem({ item: item })
          }, (item: string) => item)
        }
        .width('100%')
          .height('100%')
      }
      .height('100%')
    }
  }

@Component
  struct ChildItem {
    @Prop item: string;

    build() {
      Text(this.item)
        .fontSize(50)
    }
  }

相关文章