HarmonyOS ：ArkUI `动态组件` 与`组件工厂` 的最佳封装策略

2024-11-29
北京
本文字数：2106 字
阅读完需：约 7 分钟

引言

本篇整理项目开发中关于组件封装的最佳实践。探讨 ArkUI 中组件的动态操作技巧，以及如何通过工厂封装模式来优化组件的创建和管理，从而提升开发效率和应用性能。

“ArkUI 组件封装场景”
在应用开发过程中，不同的业务场景可能需要使用相同功能和样式的 Arku!组件。例如，登录页面登录按钮和购物页面结算按钮可能样式相同，部分实现不同。该场景常用方法是抽取相同样式部分，并将其封装成一个自定义组件到公共组件库中。在业务场景开发时，统一从公共组件库获取封装好的公用组件。

动态组件封装

1. 传统组件封装示例，普遍但不推荐

示例一段简单的代码，封装一个自定义按钮

@Componentstruct CusButton {  @Prop text: string = ""  @Prop buttonType: ButtonType  // ...穷举所有Button独有属性
  build() {    Button(this.text)      .fontSize(12)      .fontColor(Color.Black)      .type(this.buttonType)    // 穷举Button其他独有的属性赋值  }}

复制代码

在使用 CusButton 组件时，若需修改组件显示内容 text 和按钮类型 buttonType 时，需要以参数的形式传入:

@Componentstruct Index {  @State buttonType: ButtonType = ButtonType.Normal
  build() {    // 入参包含 CusButton 组件中定义的全部Button独有属性    CusButton({ text: '测试按钮', buttonType: this.buttonType, ... })  }}

复制代码

缺点:
使用方式无法为链式调用
刷新性能影响大
入参多，不利于维护，系统组件如果属性发生变化，则需要同步修改

2. 采用 'AttributeModifier' 进行组件封装

对于‘动态属性’组件的封装，我们推荐使用 AttributeModifier，对上述代码进行改造，如下：

第一步：新建类实现 AttributeModifier 接口，作为属性修改器

class CusButtonModifier implements AttributeModifier<ButtonAttribute> {  private buttonType: ButtonType = ButtonType.Normal;
  applyNormalAttribute(instance: ButtonAttribute): void {    instance.stateEffect(true)    instance.type(this.buttonType)    instance.height(50)    instance.fontSize(20)  }
  toggleType(): CusButtonModifier {    if (this.buttonType === ButtonType.Normal) {      this.buttonType = ButtonType.Capsule    } else {      this.buttonType = ButtonType.Normal    }    return this;  }}

复制代码

解释说明：

ButtonAttribute ： AttributeModifier<T> 内泛型的具体类型。T 代表组件的属性类，用来标识进行属性设置的组件的类型，比如 Button 组件的 ButtonAttribute，Text 组件的 TextAttribute 等。
toggleType：小编自定义的一个示例方法，提供外部调用，用于展示按钮样式属性修改；带返回值是为了提供链式调用能力。

第二步：使用 CusButtonModifier 进行属性修改

@Componentstruct Index {  @State modifier: CusButtonModifier = new CusButtonModifier();
  build() {    Button('Test AttributeModifier Button')      .attributeModifier(this.modifier)      .onClick(() => {        // 这里调用 属性修改器 修改属性        this.modifier.toggleType()      })  }}

复制代码

效果如下：

优势：
将属性修改逻辑与业务逻辑分离，降低了组件间的耦合度；
通过集中管理属性修改逻辑，使得代码更易于理解和维护
AttributeModifier 可以被设计为通用组件，用于多个不同的场景和项目中

组件工厂封装

组件工厂封装是一种设计模式，用于创建和管理组件的实例，以提高代码的可维护性、可扩展性和复用性。

1. 使用 `wrapBuilder` 封装组件工厂

// UI1、UI2 是组件提供者@Builderfunction UI1(text: string) {  Text(text).fontColor(Color.Green)}@Builderfunction UI2(text: string) {  Text(text).fontColor(Color.Blue)}
// 定义组件工厂Maplet factoryMap: Map<string, object> = new Map();
// 将需要工厂化的组件存入到组件工厂中factoryMap.set('UI1', wrapBuilder(UI1))factoryMap.set('UI2', wrapBuilder(UI2))
//导出组件工厂export { factoryMap }

复制代码

2. 通过 `WrappedBuilder` 使用组件工厂

@Componentstruct TestComponentFactory {  build() {    Column({ space: 10 }) {      (factoryMap.get('UI1') as WrappedBuilder<[string]>).builder('工厂组件 - 1');      (factoryMap.get('UI2') as WrappedBuilder<[string]>).builder('工厂组件 - 2');    }  }}

复制代码

运行效果如下：

附注（Example）

Demo 示例已上传：

GitHub：https://github.com/liyufengrex/HarmonyAtomicService

GitCode：https://gitcode.com/liyufengrex/HarmonyAtomicService

（基于 API11 开发，支持 NEXT 及以上版本运行）已上传可供参考，包含如下内容：

静态库+动态包+多模块设计
状态管理
统一路由管理（router+navPathStack）
网络请求、Loading 等工具库封装
自定义组件、自定义弹窗（解耦）
EventBus 事件通知
扩展修饰器，实现节流、防抖、权限申请
动态路由（navPathStack + 动态 import + WrappedBuilder）
UI 动态节点操作 (BuilderNode + NodeController)
折叠屏适配示例
组件工厂示例
组件动态属性设置示例
云函数、云数据库使用示例
华为账号服务示例（快速登陆、快速验证手机号）

发布于: 刚刚阅读数: 3

李小轰

关注

有趣的灵魂，拒绝沉默 2022-03-28 加入

目前从事 Android、Flutter、HarmonyOS 开发工作，喜欢尝试各种新玩意儿。重度强迫症（匠心精神），乐于分享！『 OpenHarmony 三方库贡献者』、『 pub.dev 三方库维护者』

发布

暂无评论

创作场景

HarmonyOS ：ArkUI `动态组件` 与`组件工厂` 的最佳封装策略

引言

动态组件封装

1. 传统组件封装示例，普遍但不推荐

2. 采用 'AttributeModifier' 进行组件封装

组件工厂封装

1. 使用 wrapBuilder 封装组件工厂

2. 通过 WrappedBuilder 使用组件工厂

附注（Example）

李小轰

评论

1. 使用 `wrapBuilder` 封装组件工厂

2. 通过 `WrappedBuilder` 使用组件工厂