鸿蒙笔记3

原创已于 2024-03-05 11:28:02 修改 · 246 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#鸿蒙系统

于 2023-02-06 00:03:15 首次发布

这次课主要讲了列表以及渲染的一些用法

列表

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

使用方法

示例

父子组件（自定义组件）

子组件导出用export语句

父组件导入用import {子组件文件名称} from "子组件文件相对路径"

双向数据绑定

子组件导出用export语句

父组件导入用import {子组件文件名称} from "子组件文件相对路径"

双向数据绑定

改变任何一方数据时，两方数据都会变为改变的一方数据

子组件中数据用@Link修饰

父组件中用@State修饰，在子组件接口中数据用$修饰

if-else渲染

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

if/else条件语句可以使用状态变量。

使用if/else可以使子组件的渲染依赖条件语句。

必须在容器组件内使用。

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


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 
)

参数名	参数类型	必填	参数描述
arr	any[]	是	必须是数组，允许设置为空数组，空数组场景下将不会创建子组件。同时允许设置返回值为数组类型的函数，例如arr.slice(1, 3)，设置的函数不得改变包括数组本身在内的任何状态变量，如Array.splice、Array.sort或Array.reverse这些改变原数组的函数。
itemGenerator	(item: any, index?: number) => void	是	生成子组件的lambda函数，为数组中的每一个数据项创建一个或多个子组件，单个子组件或子组件列表必须包括在大括号“{...}”中。
keyGenerator	(item: any, index?: number) => string	否	匿名函数，用于给数组中的每一个数据项生成唯一且固定的键值。当数据项在数组中的位置更改时，其键值不得更改，当数组中的数据项被新项替换时，被替换项的键值和新项的键值必须不同。键值生成器的功能是可选的，但是，为了使开发框架能够更好地识别数组更改，提高性能，建议提供。如将数组反向时，如果没有提供键值生成器，则ForEach中的所有节点都将重建。

ForEach必须在容器组件内使用。

生成的子组件应当是允许包含在ForEach父容器组件中的子组件。

允许子组件生成器函数中包含if/else条件渲染，同时也允许ForEach包含在if/else条件渲染语句中。

itemGenerator函数的调用顺序不一定和数组中的数据项相同，在开发过程中不要假设itemGenerator和keyGenerator函数是否执行及其执行顺序。例如，以下示例可能无法正常工作：


ForEach(anArray.map((item1, index1) => { return { i: index1 + 1, data: item1 }; }), 
  item => Text(`${item.i}. item.data.label`),
  item => item.data.id.toString())

示例


// 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())
    }
  }
}