梅科尔工作室-李柯增-鸿蒙笔记3

一、list组件：

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

如图所示使用：

二、父子组件（又称自定义组件）：

使用说明：

1.子组件导出用export语句

2.父组件导入用import {子组件文件名称} from "子组件文件相对路径"

3.双向数据绑定：

（1）改变任何一方数据时，两方数据都会变为改变的一方数据

（2）子组件中数据用@Link修饰如图：

（3）父组件中用@State修饰，在子组件接口中数据用$修饰如图：

三、if-else渲染（基本用法和c语言一样）：

说明：

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)
}
}

1.语法使用：（ps：必须在容器中使用且使用if/else可以使子组件的渲染依赖条件语句）

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

四、for循环渲染：

通过循环渲染（ForEach）从数组中获取数据，并为每个数据项创建相应的组件，可减少代码复杂度。

如：

ForEach(
arr: any[],
itemGenerator: (item: any, index?: number) => void,
keyGenerator?: (item: any, index?: number) => string
)

参数：

参数名	参数类型	必填	参数描述
arr	any[]	是	必须是数组，允许设置为空数组，空数组场景下将不会创建子组件。同时允许设置返回值为数组类型的函数，例如arr.slice(1, 3)，设置的函数不得改变包括数组本身在内的任何状态变量，如Array.splice、Array.sort或Array.reverse这些改变原数组的函数。
itemGenerator	(item: any, index?: number) => void	是	生成子组件的lambda函数，为数组中的每一个数据项创建一个或多个子组件，单个子组件或子组件列表必须包括在大括号“{...}”中。
keyGenerator	(item: any, index?: number) => string	否	匿名函数，用于给数组中的每一个数据项生成唯一且固定的键值。当数据项在数组中的位置更改时，其键值不得更改，当数组中的数据项被新项替换时，被替换项的键值和新项的键值必须不同。键值生成器的功能是可选的，但是，为了使开发框架能够更好地识别数组更改，提高性能，建议提供。如将数组反向时，如果没有提供键值生成器，则ForEach中的所有节点都将重建。

注意：

ForEach必须在容器组件内使用。
生成的子组件应当是允许包含在ForEach父容器组件中的子组件。
允许子组件生成器函数中包含if/else条件渲染，同时也允许ForEach包含在if/else条件渲染语句中。
itemGenerator函数的调用顺序不一定和数组中的数据项相同，在开发过程中不要假设itemGenerator和keyGenerator函数是否执行及其执行顺序。例如，以下示例可能无法正常工作

ForEach(anArray.map((item1, index1) => { return { i: index1 + 1, data: item1 }; }),
item => Text(`${item.i}. item.data.label`),
item => item.data.id.toString())

其他注意事项：

必须在容器组件内使用；
生成的子组件允许在ForEach的父容器组件中，允许子组件生成器函数中包含if/else条件渲染，同时也允许ForEach包含在if/else条件渲染语句中；

梅科尔工作室-李柯增-鸿蒙笔记3相关推荐

梅科尔工作室-李柯增-鸿蒙笔记2
组件的使用: 一.组件介绍: 组件(Component)是界面搭建与显示的最小单位,HarmonyOS ArkUI声明式开发范式为开发者提供了丰富多样的UI组件,我们可以使用这些组件轻松的编写出更加丰 ...
梅科尔工作室-李柯增-鸿蒙笔记4
一.官方API使用首先需要找到想要使用的API文档.在基础文档里位置如下.找到之后,查看文档中关于此接口的说明,查看使用方法和使用案例后即可使用. 二.路由跳转模块官方讲解:华为开发者学堂具体作 ...
梅科尔工作室-李舒婷-鸿蒙笔记4
官方API使用路由器跳转模块实现Ability内页面的跳转导入router模块跳转方式选设置点击按钮点击一次跳转到已经建立的页面再一次或多次点击就会新建页面按返回键返回时从最后建立的页面 ...
梅科尔工作室-李舒婷-鸿蒙笔记2
组件分为: 基础组件.容器组件.媒体组件.绘制组件.画布组件. 基础组件包括:Text .Image.Textlnput .Button .LoadingProgress 等 Text: Image ...
梅科尔工作室-李承津-鸿蒙笔记4
API接口(给界面添加功能) 页面跳转模块导入router模块页面跳转方式 1.每使用一次新建一个页面,最大页面数为32 router.push({url: 'pages/Second',para ...
梅科尔工作室-崔启凡-鸿蒙笔记4
鸿蒙笔记4 路由跳转作用用法跳转方式方式一方式二方式三方式四跳转页面数据的接受数据请求弹窗绑定事件点击事件触摸事件挂载卸载事件拖拽事件路由跳转作用实现Ability ...
梅科尔工作室-梁嘉莹-鸿蒙笔记1
基本操作界面介绍预览按钮内置API文档查阅项目设置运行按钮(只有在真机模拟或远程模拟时才可以使用) 安装插件,在files下的settings-->Plugins里面,可以安装一个中文的 ...
梅科尔工作室-江凌宇-鸿蒙笔记1
对于鸿蒙软件开发所用编译器的介绍鸿蒙APP开发所采用的编译器为华为自研的DevEc编译器,简洁美观易上手是此编译器的巨大优势主要目录配置文件作用(stage模型和FA模型下) 下面是在FA模型下的 ...
梅科尔工作室-江凌宇-鸿蒙笔记2
HarmonyOS构建漂亮的页面一.页面基本元素介绍常用基础组件组件介绍: 组件(Component)是界面搭建与显示的最小单位,HarmonyOS ArkUI声明式开发范式为开发者提供了丰富多 ...

梅科尔工作室-李柯增-鸿蒙笔记3

梅科尔工作室-李柯增-鸿蒙笔记3相关推荐

最新文章

热门文章