梅科尔工作室-崔子旭-鸿蒙作业3

List组件

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

语法：

示例：

List({ space: 20 }) {

ForEach(this.numList, (item) => {

ListItem() {

Text(item.toString())

.fontSize(30)

.width("100%")

.height("10%")

.backgroundColor("#DCDCDC")

.textAlign(TextAlign.Center)

.borderRadius(20)

}

})

}

父子组件（自定义组件）

步骤：

• 子组件导出用export语句

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

• 双向数据绑定

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

• 子组件中数据用@Link修饰

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

条件渲染

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

注意事项：

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

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

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

语法：if/else渲染可以改变组件的渲染状态，即决定组件是否在页面中被渲染。if括号内的变量是true的话，则对应下的组件都被渲染，否则都不被渲染。

示例：

1. Column() {

2. if (this.count < 0) {

3. Text('count is negative').fontSize(14)

4. } elseif (this.count % 2 === 0) {

5. Text('count is even').fontSize(14)

6. } else {

7. Text('count is odd').fontSize(14)

8. }

9. }

循环渲染

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

语法：

1. ForEach(

2. arr: any[],

3. itemGenerator: (item: any, index?: number) =>void,

4. keyGenerator?: (item: any, index?: number) =>string

5. )

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

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

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

• itemGenerator函数的调用顺序不一定和数组中的数据项相同，在开发过程中不要假设itemGenerator和keyGenerator函数是否执行及其执行顺序。