梅科尔工作室-张梦梦-鸿蒙笔记3-CSDN博客

本文链接：https://blog.csdn.net/morr_/article/details/128904125

list组件

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

如图所示

父子组件

子组件导出用export语句

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

双向数据绑定

改变任何一方数据时，两方数据都会变为改变的一方数据
子组件中数据用@Link修饰

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

if-else渲染

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

使用语法

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

注意事项

必须在容器组件内使用。
使用if/else可以使子组件的渲染依赖条件语句。

for循环渲染

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

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

说明

ForEach必须在容器组件内使用。
生成的子组件应当是允许包含在ForEach父容器组件中的子组件。
允许子组件生成器函数中包含if/else条件渲染，同时也允许ForEach包含在if/else条件渲染语句中。
itemGenerator函数的调用顺序不一定和数组中的数据项相同，在开发过程中不要假设itemGenerator和keyGenerator函数是否执行及其执行顺序。例如，以下示例可能无法正常工作：

简单类型数组示例