List组件
由list容器组件和listitem容器组件构成,list是一个大容器,listitem是大容器里的小容器
语法:
![](https://i-blog.csdnimg.cn/blog_migrate/587ec3fdd4a64cdfd12c58f81257db84.png)
示例:
List({ space: 20 }) {
ForEach(this.numList, (item) => {
ListItem() {
Text(item.toString())
.fontSize(30)
.width("100%")
.height("10%")
.backgroundColor("#DCDCDC")
.textAlign(TextAlign.Center)
.borderRadius(20)
}
})
}
![](https://i-blog.csdnimg.cn/blog_migrate/b7d4aa9a2f61c18cd6a3937977521b68.png)
父子组件(自定义组件)
步骤:
子组件导出用export语句
![](https://i-blog.csdnimg.cn/blog_migrate/0b5a1cfbe14c3004a08adb8a8dce5156.png)
父组件导入用import {子组件文件名称} from "子组件文件相对路径"
![](https://i-blog.csdnimg.cn/blog_migrate/7c831ced076660d57ecc3836ecd0a9ef.png)
双向数据绑定
改变任何一方数据时,两方数据都会变为改变的一方数据
子组件中数据用@Link修饰
![](https://i-blog.csdnimg.cn/blog_migrate/22fe6737bd7d91dbee97907af5e917a0.png)
父组件中用@State修饰,在子组件接口中数据用$修饰
![](https://i-blog.csdnimg.cn/blog_migrate/dbcbf69719800f0a24496eb940054757.png)
![](https://i-blog.csdnimg.cn/blog_migrate/6132ccaeaf21b373fc7ffc9c0a601735.png)
条件渲染
使用if/else进行条件渲染。
注意事项:
if/else条件语句可以使用状态变量。
使用if/else可以使子组件的渲染依赖条件语句。
必须在容器组件内使用。
语法:if/else渲染可以改变组件的渲染状态,即决定组件是否在页面中被渲染。if括号内的变量是true的话,则对应下的组件都被渲染,否则都不被渲染。
示例:
Column() {
if (this.count < 0) {
Text('count is negative').fontSize(14)
} elseif (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
)
![](https://i-blog.csdnimg.cn/blog_migrate/b7ce3a02da080707c2c099020d9f5786.png)
ForEach必须在容器组件内使用。
生成的子组件应当是允许包含在ForEach父容器组件中的子组件。
允许子组件生成器函数中包含if/else条件渲染,同时也允许ForEach包含在if/else条件渲染语句中。
itemGenerator函数的调用顺序不一定和数组中的数据项相同,在开发过程中不要假设itemGenerator和keyGenerator函数是否执行及其执行顺序。