list组件
由list容器组件和listitem容器组件构成,list是一个大容器,listitem是大容器里的小容器
使用说明
示例
父子组件(自定义组件)
子组件导出用export语句
父组件导入用import {子组件文件名称} from "子组件文件相对路径"
双向数据绑定
改变任何一方数据时,两方数据都会变为改变的一方数据
子组件中数据用@Link修饰
父组件中用@State修饰,在子组件接口中数据用$修饰
if-else渲染
条件渲染:使用if/else进行条件渲染。
说明
if/else条件语句可以使用状态变量。
使用if/else可以使子组件的渲染依赖条件语句。
必须在容器组件内使用。
某些容器组件限制子组件的类型或数量,将if/else用于这些组件内时,这些限制将同样应用于if/else语句内创建的组件。例如,Grid容器组件的子组件仅支持GridItem组件,在Grid内使用if/else时,则if/else语句内也仅允许使用GridItem组件。
示例
示例
使用if条件语句:
使用if、else if、else条件语句:
for循环渲染
开发框架提供循环渲染(ForEach组件)来迭代数组,并为每个数组项创建相应的组件。ForEach定义如下:
循环渲染
通过循环渲染(ForEach)从数组中获取数据,并为每个数据项创建相应的组件,可减少代码复杂度。
示例
说明
ForEach必须在容器组件内使用。
生成的子组件应当是允许包含在ForEach父容器组件中的子组件。
允许子组件生成器函数中包含if/else条件渲染,同时也允许ForEach包含在if/else条件渲染语句中。
itemGenerator函数的调用顺序不一定和数组中的数据项相同,在开发过程中不要假设itemGenerator和keyGenerator函数是否执行及其执行顺序。例如,以下示例可能无法正常工作:
使用语法
if/else渲染可以改变组件的渲染状态,即决定组件是否在页面中被渲染。if括号内的变量是true的话,则对应下的组件都被渲染,否则都不被渲染。
示例
简单类型数组示例: