list组件
由list容器组件和listitem容器组件构成,list是一个大容器,listitem是大容器里的小容器
如图所示
![](https://i-blog.csdnimg.cn/blog_migrate/b8b45d8dd1931f1ca9dff633f5ff7d51.png)
![](https://i-blog.csdnimg.cn/blog_migrate/eef98bf4705f1cd5fe901cba7b604bd4.png)
![](https://i-blog.csdnimg.cn/blog_migrate/8d9f67b7cd73b08f600a89e164307770.png)
父子组件
子组件导出用export语句
![](https://i-blog.csdnimg.cn/blog_migrate/8b0e07c7837d4dc28dbd82db0f74d9c2.png)
父组件导入用import {子组件文件名称} from "子组件文件相对路径"
![](https://i-blog.csdnimg.cn/blog_migrate/b05640965f458f8d3e4e181fa88c3cd8.png)
双向数据绑定
改变任何一方数据时,两方数据都会变为改变的一方数据
子组件中数据用@Link修饰
![](https://i-blog.csdnimg.cn/blog_migrate/52b40915231049249954177c9b6f0249.png)
父组件中用@State修饰,在子组件接口中数据用$修饰
![](https://i-blog.csdnimg.cn/blog_migrate/2342ff5271ea753fca7b530b72028c33.png)
![](https://i-blog.csdnimg.cn/blog_migrate/51826e13a4d38a82ac5a7383e3b6fe1a.png)
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
)
![](https://i-blog.csdnimg.cn/blog_migrate/da84b5088fbdad480464ac1910abb081.png)
说明
ForEach必须在容器组件内使用。
生成的子组件应当是允许包含在ForEach父容器组件中的子组件。
允许子组件生成器函数中包含if/else条件渲染,同时也允许ForEach包含在if/else条件渲染语句中。
itemGenerator函数的调用顺序不一定和数组中的数据项相同,在开发过程中不要假设itemGenerator和keyGenerator函数是否执行及其执行顺序。例如,以下示例可能无法正常工作:
简单类型数组示例
![](https://i-blog.csdnimg.cn/blog_migrate/f3ca4d0b359ba3228b0127322911f1d4.png)