高要区住房和城乡建设局网站,网站建设套餐报价,百度系app有哪些,网站上线后做什么文章目录 一、自定义组件概述1、什么是自定义组件2、自定义组件的优点 二、创建自定义组件1、自定义组件的结构2、自定义组件要点3、成员变量的创建4、参数传递规则 三、练习案例 一、自定义组件概述
1、什么是自定义组件
在ArkUI中#xff0c;UI显示的内容均为组件#xf… 文章目录 一、自定义组件概述1、什么是自定义组件2、自定义组件的优点 二、创建自定义组件1、自定义组件的结构2、自定义组件要点3、成员变量的创建4、参数传递规则 三、练习案例 一、自定义组件概述
1、什么是自定义组件
在ArkUI中UI显示的内容均为组件由框架直接提供的称为系统组件由开发者定义的称为自定义组件。在进行 UI 界面开发时通常不是简单的将系统组件进行组合使用而是需要考虑代码可复用性、业务逻辑与UI分离后续版本演进等因素。因此将UI和部分业务逻辑封装成自定义组件是不可或缺的能力。
2、自定义组件的优点
自定义组件具有以下优点
可组合允许开发者组合使用系统组件、及其属性和方法。可重用自定义组件可以被其他组件重用并作为不同的实例在不同的父组件或容器中使用。数据驱动UI更新通过状态变量的改变来驱动UI的刷新。
二、创建自定义组件
1、自定义组件的结构
struct自定义组件基于struct实现struct 自定义组件名 {…}的组合构成自定义组件不能有继承关系。对于struct的实例化可以省略new。 说明自定义组件名、类名、函数名不能和系统组件名相同。ComponentComponent装饰器仅能装饰struct关键字声明的数据结构。struct被Component装饰后具备组件化的能力需要实现build方法描述UI一个struct只能被一个Component装饰。
2、自定义组件要点
1、组件必须使用Component进行装饰 2、只在页面上呈现Entry装饰的组件且Entry必须唯一其build()函数下的根节点唯一且必要可以为非容器组件其中ForEach禁止作为根节点。 3、build()函数下的根节点唯一且必要且必须为容器组件其中ForEach禁止作为根节点。 4、被Entry 装饰的入口组件build()函数中必须有且仅有一个根容器组件如row() 5、自定义组件可以使用成员变量即可以传递参数注意在组件内的变量都是私有化的 6、组件传递参数时使用键值对进行传递
3、成员变量的创建
自定义组件除了必须要实现build()函数外还可以实现其他成员函数成员函数具有以下约束
不支持静态函数。成员函数的访问是私有的。 自定义组件可以包含成员变量成员变量具有以下约束不支持静态成员变量。所有成员变量都是私有的变量的访问规则与成员函数的访问规则相同。自定义组件的成员变量本地初始化有些是可选的有些是必选的。具体是否需要本地初始化是否需要从父组件通过参数传递初始化子组件的成员变量请参见官方文档状态管理概述。
4、参数传递规则
自定义构建函数的参数传递有按值传递和按引用传递两种均需遵守以下规则
参数的类型必须与参数声明的类型一致不允许undefined、null和返回undefined、null的表达式。在自定义构建函数内部不允许改变参数值。如果需要改变参数值且同步回调用点建议使用Link。Builder内UI语法遵循官方文档自定义组件语法规则。
三、练习案例
1、练习需求 用自定义组件传参的方式传入4行《赤壁赋》的句子每一行使用一个图标加上句子的排版。事件效果为点击某一行句子图标发生变化且该行句子会被标记删除线。
2、练习源码
Entry
Component
struct Index {State message: string 赤壁赋build() {Row() {Column({space:20}) {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)// Row(){// Image($r(app.media.icon))// .width(40)// .margin(15)// Text(惟江上之清风)// .fontSize(40)// .fontColor(Color.Blue)// }// .borderRadius(25)// .backgroundColor(Color.Orange)// .padding(5)itemCom({ss:惟江上之清风})itemCom({ss:与山间之明月。})itemCom({ss:耳得之而为声})itemCom({ss:目遇之而成色。})}.width(100%)}.height(100%)}
}Component
struct itemCom{private ss: string Chi Bi Fu//可以驱动UI进行更新的装饰器State默认设置不更新State st: boolean falsebuild() {//必须有一个根组件Row(){//使用单元运算符表达式判断状态值Image(this.st ? $r(app.media.ic) : $r(app.media.icon)).width(40).margin(15)//更改文本效果当点击过后则在文字上加一条删除线Text(this.ss).fontSize(35).fontColor(Color.Blue).decoration({type: this.st ? TextDecorationType.LineThrough : TextDecorationType.None})}.borderRadius(25).backgroundColor(Color.Orange).padding(5)//在row下设置点击事件当点击某条句子时就更新图标.onClick((){//通过取反使得两种图标可以交互更新this.st !this.st})}
}3、测试效果
