响应式网站好不好,平面设计网站导航,唯美wordpress简约主题,网站建设与管理自考重点前言 本文代码案例基于Api13。 在实际的开发中#xff0c;我们经常会遇到自定义组件的情况#xff0c;比如通用的列表组件#xff0c;选项卡组件等等#xff0c;由于使用方的样式不一#xff0c;子组件是动态变化的#xff0c;针对这一情况#xff0c;就不得不让使用方把…前言 本文代码案例基于Api13。 在实际的开发中我们经常会遇到自定义组件的情况比如通用的列表组件选项卡组件等等由于使用方的样式不一子组件是动态变化的针对这一情况就不得不让使用方把子组件视图传递过来如何来接收这个UI视图这就是BuilderParam装饰器的作用。 简单案例 简单封装一个通用的List组件由于每个列表的数据和UI布局都是不一样的那么这两块就需要暴露给使用方代码如下 /*** AUTHOR:AbnerMing* DATE:2025/2/13* INTRODUCE:通用的列表组件* */
Component
export struct ListView {dataList?: Object[] //数据源BuilderParam itemLayout: (item: Object, index: number) void //子视图build() {List() {ForEach(this.dataList, (item: Object, index: number) {ListItem() {this.itemLayout(item, index)}})}}
} 以上的自定义List组件我们就可以用在任何页面只需要传递数据和子视图即可。 Entry
Component
struct Index {BuilderitemLayout(item: Object, index: number) {Text(item.toString())}build() {Column() {ListView({dataList: [0, 1, 2, 3, 4, 5, 6],itemLayout: this.itemLayout})}.height(100%).width(100%)}
} BuilderParam装饰器让UI组件赋予了动态的变化可以根据自身需要实现不同的效果避免了实例增加了相同的功能从而实现更高程度的组件复用和代码解耦。 使用方式 BuilderParam装饰器常见于自定义组件暴露给使用方进行调用用来承接Builder装饰器修饰的函数使用方式很简单格式如下 BuilderParam test: () void 如果接收参数直接在括号中添加即可。 除了正常的由调用者传递UI组件之外我们也可以初始化一个默认的视图直接在后面等于即可这样在未传递的话就会加载默认的视图。 Builder
testView() {}BuilderParam test: () void this.testView() this指向问题 如下所示我们自定义了一个组件定义了两个BuilderParam用于接收传递的UI视图 Component
export struct TestView {testContent: string TestViewBuilderParam layout: () voidBuilderParam layout2: () voidbuild() {Column() {if (this.layout ! undefined) {this.layout()}if (this.layout2 ! undefined) {this.layout2()}}}
} 我们通过三种方式分别调用Builder修饰的函数。 Entry
Component
struct Index {testContent: string IndexBuildertestView() {Text(${this.testContent}).fontSize(20).margin({ top: 20 }).fontWeight(FontWeight.Bold)}build() {Column() {this.testView()TestView({ layout: this.testView })TestView({layout2: () {this.testView()}})}.height(100%).width(100%)}
} 运行之后效果如下 我们可以看到直接调用Builder修饰的函数也就是this.testView()这行代码this指向的是当前的Index类其值也是取的Index中值。 当我们以参数的形式传递给BuilderParam时也就是TestView({ layout: this.testView })这行代码可以发现其this并不是指的是Index类而是自定义组件TestView取的是TestView中所定义的值。 当我们针对自定义组件换种方式使用时也就是如下方式使用 TestView({layout2: () {this.testView()}}) 可以发现this又切换为了当前类Index这是因为箭头函数的this指向的是宿主对象所以其值取的是Index类中的。 所以在有BuilderParam传递UI视图时一定要注意this的指向问题这也是为什么很多同学遇到在Builder修饰的函数中为什么不刷新数据的问题其原因就是this指向不对。 数据更新 更新BuilderParam装饰器本意就是更新对应的Builder修饰的函数这个在《鸿蒙开发了解Builder装饰器》一篇中已经重点做了讲解这里再重新概述一下。 简单自定义一个组件使用 BuilderParam装饰器对外暴露一个UI视图。 Component
export struct TestView {BuilderParam layout: () voidbuild() {Column() {if (this.layout ! undefined) {this.layout()}}}
} 上面已经讲述过this指向问题了如果数据在本页面内那么一定要使用箭头函数来调用Builder修饰的函数才能实现数据的更新。 Entry
Component
struct Index {State testContent: string 测试数据一BuildertextView() {Text(this.testContent).fontSize(20).fontWeight(FontWeight.Bold)}build() {Column() {TestView({layout: () {this.textView()}})Button(点击).onClick(() {this.testContent 测试数据二})}.height(100%).width(100%)}
}
相关总结 在声明BuilderParam的时候如果未有默认值那么在不传递的情况下会发生异常崩溃为了解决这一问题有两种方案方案一主动设置默认值 Builder
testView() {}BuilderParam test: () void this.testView() 方案二在调用的地方进行非空校验 BuilderParam test: () voidbuild() {if (this.test ! undefined) {this.test()}} BuilderParam用于接收Builder定义的函数私有和全局都可以。 定义全局的Builder。 Builder
export function TextView() {Text(测试数据一).fontSize(20).fontWeight(FontWeight.Bold)
} 调用 Entry
Component
struct Index {build() {Column() {TestView({ layout: TextView })}.height(100%).width(100%)}
}
