梅科尔工作室-王文晴-鸿蒙笔记3

梅科尔王文晴
发布于 2024-1-10 17:49
浏览
0收藏


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

list列表包含一系列相同宽度的列表项。适合连续、多行呈现同类数据,例如图片和文本。

<list>的子组件,用来展示列表具体item。由于父元素list组件的align-items默认样式为stretch,该组件宽度默认充满list组件。设置父元素list组件的align-items样式为非stretch来生效自定义宽度。

父子组件(自定义组件)
重新建一个文件子组件

@component

expot struct 组件名{

build(){

}

}

再导入应用到主页面

import{组件名}from“相对路径”

双向数据绑定
改变任何一方数据时,两方数据都会变为改变的一方数据

子组件用@Link修饰

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

先看子组件再向父组件传值

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

某些容器组件限制子组件的类型或数量,将if/else用于这些组件内时,这些限制将同样应用于if/else语句内创建的组件。例如,Grid容器组件的子组件仅支持GridItem组件,在Grid内使用if/else时,则if/else语句内也仅允许使用GridItem组件。

必须在容器组件内使用。

使用if/else可以使子组件的渲染依赖条件语句。

for循环渲染
过循环渲染(ForEach)从数组中获取数据,并为每个数据项创建相应的组件,可减少代码复杂度

开发框架提供循环渲染(ForEach组件)来迭代数组,并为每个数组项创建相应的组件。

for指令可以将一个数组渲染成一个列表

ForEach(this.numlist,(item)=>{})

必须在容器组件内使用

生成的子组件允许在ForEach的父容器组件中,允许子组件生成器函数中包含if/else条件渲染,同时也允许ForEach包含在if/else条件渲染语句中

标签
已于2024-1-22 10:18:14修改
收藏
回复
举报
回复
    相关推荐