一、list组件
list组件一般需要配合listitem组件使用,list组件可以视为一个清单,listitem为清单中的元素,基本结构如下
List(){
ListItem(){//这里可以填写一些
对ListItem内元素进行修饰的代码
}
}
如上图,就是设置了这个list中各个listitem之间的间隔距离。
参数:
二、父子组件
当我们频繁使用一种系统没有定义的组件时,我们可以考虑将其编写为一个自定义组件,在需要时调用它,这就是父子组件。
(一)、子组件
在另一个文件夹中编写子组件(修饰器不用写@entry),子组件导出用export语句
(二)、父组件
调用子组件的称为父组件,父组件导入用import {子组件文件名称} from “子组件文件相对路径”。
在调用时,直接将子组件当做一个组件进行使用即可。
(三)、双向数据绑定
通过双向绑定,当我们修改某一方的数据时,父子双方的数据都会变为改变的一方数据,
子组件中数据用@Link修饰
父组件中用@State修饰,在子组件接口中数据用$修饰
三、渲染
(一)、if-else渲染(条件渲染)
在使用条件渲染时必须注意,if/else条件语句可以使用状态变量、使用if/else可以使子组件的渲染
依赖条件语句、必须在容器组件内使用。
if (this.childstatu) #如果childststu为真
{
Text(this.childum.toString())#显示如下内容
}
其他如:if-else语句,操作起来和C语言类似。
(二)、for循环渲染
用ForEach组件来迭代数组,并为每个数组项创建相应的组件。通过循环渲染(ForEach)从数组中获取数据,并为每个数据项创建相应的组件,可减少代码复杂度。
ForEach(
arr: any[],
itemGenerator: (item: any, index?: number) => void,
keyGenerator?: (item: any, index?: number) => string
)