鸿蒙学习笔记 07 循环渲染

Kaede清水枫

已于 2024-10-02 18:56:42 修改

阅读量278

点赞数 16

分类专栏：鸿蒙学习笔记文章标签：学习笔记 harmonyos

于 2024-10-02 18:49:23 首次发布

本文链接：https://blog.csdn.net/2401_87652471/article/details/142683379

版权

鸿蒙学习笔记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

鸿蒙学习笔记 07 循环渲染

引言
实现案例
End

引言

假如说, 我现在有一个非常长的商品列表, 那么我难道要一个组件一个组件的写出来吗? 显然是不可能的. 那么为了提升效率, 我们就自然而然的需要使用循环渲染了.

使用循环渲染, 我们可以非常简单的实现下面这样的效果:

在这里插入图片描述
那么, 我就要介绍本次内容需要学会的东西啦: 能够构建上面那样的一个页面, 并且自定义每个组件的文本内容

实现案例

构建一个自定义组件

或许现在就说这个东西还不是时候, 不过, 为了更好的学习, 你是需要具有一定的自学能力的 (虽然说你现在可能也在看着本文进行自学).

这里直接引入一些概念, 自定义组件的定义, 以及组件传参的方法. 当然当然, 这些也是我正在摸索的东西, 所以可能存在一些错误, 但后期会进行修正的!

其实回顾程序, 你看到的第一个页面, 就是一个组件, 只不过是通过装饰器声明的而已:

@Entry // 这个装饰器的意思是入口组件, 只能有一个
@Component // 只要是组件, 都可以配置这个装饰器, 进而可以多次复用
struct Index {
	// 结构体, 其实就是组件本身了
	// 下面的build方法就是组件的构造函数, 也就是显示出来的东西.
  build() {
    Column() {
    }
  }
}

那么同理, 我们要定义自定义组件, 其实就是使用一个@Component装饰器, 装饰一个结构体就好了. 这里为了实现一个简单的条目, 可以参考下面的构造方法(当然, 你也可以自定义, free to try)

@Component
struct Good {
  build() {
    Row() {
      Image($r("app.media.avatar"))
        .width(100)
        .borderRadius(20)
      Column() {
        Text("Hello World")
        Text("Ni Hao")
      }
    }
    .justifyContent(FlexAlign.SpaceEvenly)
    .width("100%")
    .backgroundColor(Color.Transparent)
  }
}

目前位置, 你已经成功了!

在这里插入图片描述

如何浏览单个组件呢? 你可以先选中当前组件, 然后点击右边浏览器上面的小按钮就可以啦. 随后你就可以单独的查看定义的组件, 不需要非要全部渲染, 从而提高开发效率.
对了, 别忘了前面添加一个@Preview装饰器!

实现循环渲染

好啦, 你已经有了一个自定义的组件, 接下来就要去循环渲染了!

我们可以使用自带的一个方法: ForEach()遍历一个列表进行循环, 进而实现渲染效果. ForEach有三个参数, 第一个参数是需要遍历的列表, 第二个参数就是回调函数, 用箭头函数指向需要构建的内容即可; 第三个参数是用来生成唯一key的, 可以不配置.

你问为什么不能够使用for循环? 自己试一试呗, 编译器会告诉你为什么的

这里假设我们需要渲染一个5个元素的东西, 那么列表中应当存在5个元素, 这样次数才是匹配的; 因为目前我们的组件为静态组件, 所以就和前面的列表没什么关系, 后面才会用到.

经过思考, 我们可以得到以下代码:

@Entry
@Component
struct Index {
  @State myList: Array<number> = [1, 2, 3, 4, 5]
  build() {
    Column({ space: 20 }) {
      ForEach(this.myList, (a: number) => {
        Good()
      })
    }
  }
}

对应渲染为:

在这里插入图片描述

实现动态传值

构建列表

我们当然不可能一直是这个文本, 当然是需要修改的, 那么这个文本应该储存在哪里呢? 当然就是前面的列表啦. 可是列表中是存在多个内容的, 这里我们就需要创建一个类: Item类.

由于我们有两个文本组件, 所以需要定义两个文本, 并且构建对应的构造函数, 比如下面这样子

class Item {
  text1: string
  text2: string

  constructor(text1: string, text2: string) {
    this.text1 = text1
    this.text2 = text2
  }
}

随后, 才可以构建列表(~~这就是ArkTS的一丢丢不算缺点的缺点, 有些严谨了~~), 我们列表的类型当然就是上面构建的类, 列表的内容, 就是一个个的Item对象:

let items: Array<Item> = [
  new Item("Kaede Shimizu", "Just do it!"),
  new Item("Kaede", "My First Name"),
  new Item("Shimizu", "My Last Name"),
  new Item("Why", "Just for like"),
  new Item("What's this", "Just a test"),
];

重构自定义组件

由于我们需要传入参数, 所以需要用两个变量来接收. 这里还是使用装饰器来获取传入的值, 比Vue3好用多了(bushi)

直接语法@Prop 变量: 类型 = 初始化值即可.

随后, 我们需要修改显示的文本为传入的变量, 其他的不需要修改, 就可以得到下面这样的组件了:

@Component
struct Good {
  // 允许传入几个参数
  @Prop text1: string = "Kaede Shimizu"
  @Prop text2: string = "Just do it !"

  build() {
    Row() {
      Image($r("app.media.avatar"))
        .width(100)
        .borderRadius(20)
      Column() {
        Text(this.text1)
        Text(this.text2)
      }
    }
    .justifyContent(FlexAlign.SpaceEvenly)
    .width("100%")
    .backgroundColor(Color.Transparent)
  }
}

让组件显示传入的内容

回到Index结构体加粗样式, 修改ForEach的代码, 列表就是刚刚构建的列表, 第二步渲染的时候, 就需要传入Item了, 这里还是使用回调函数即可. 然后在Good()组件中, 通过配置项的格式, 传入参数就好

@Entry
@Component
struct Index {
  build() {
    Column({ space: 20 }) {
      ForEach(items, (item: Item) => {
        Good({ text1: item.text1, text2: item.text2 })
      })
    }
  }
}