HarmonyOS 有组件工厂类封装的示例代码吗？

Question

如题：HarmonyOS 有组件工厂类封装的示例代码吗？
本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

Answer 1

1. 在组件工厂实现方，将需要工厂化的组件通过全局@Builder方法封装。

   // src/main/ets/view/FactoryMap.ets
   // 单选框
   @Builder
   function myRadio() {
     Text($r('app.string.radio'))
    .width('100%')
    .fontColor($r('sys.color.mask_secondary'))
     Row() {
    Radio({ value: '1', group: 'radioGroup' })
      .margin({ right: $r('app.float.margin_right') })
    Text('man')
     }
     .width(CommonConstants.ONE_HUNDRED_PERCENT)
   
     Row() {
    Radio({ value: '0', group: 'radioGroup' })
      .margin({ right: $r('app.float.margin_right') })
    Text('woman')
     }
     .width(CommonConstants.ONE_HUNDRED_PERCENT)
   }
   // 复选框
   @Builder
   function myCheckbox() {
     Text($r('app.string.checkbox'))
    .width('100%')
    .fontColor($r('sys.color.mask_secondary'))
     Row() {
    CheckboxGroup({ group: 'checkboxGroup' })
      .checkboxShape(CheckBoxShape.ROUNDED_SQUARE)
    Text('all')
      .margin({ left: $r('app.float.margin_right') })
     }
     .width(CommonConstants.ONE_HUNDRED_PERCENT)
   
     Row() {
    Checkbox({ name: '1', group: 'checkboxGroup' })
      .shape(CheckBoxShape.ROUNDED_SQUARE)
      .margin({ right: $r('app.float.margin_right') })
    Text('text1')
     }
     .width(CommonConstants.ONE_HUNDRED_PERCENT)
   
     Row() {
    Checkbox({ name: '0', group: 'checkboxGroup' })
      .shape(CheckBoxShape.ROUNDED_SQUARE)
      .margin({ right: $r('app.float.margin_right') })
    Text('text2')
     }
     .width(CommonConstants.ONE_HUNDRED_PERCENT)
   }

2. 在组件工厂实现方，将封装好的全局@Builder方法使用wrapBuilder函数包裹，并将返回值作为组件工厂Map的value值存入。全部组件存入后，将组件工厂导出供外部使用。

   // src/main/ets/view/FactoryMap.ets
   // 定义组件工厂Map
   let factoryMap: Map<string, object> = new Map();
   
   // 将需要工厂化的组件存入到组件工厂中
   factoryMap.set('Radio', wrapBuilder(myRadio));
   factoryMap.set('Checkbox', wrapBuilder(myCheckbox));
   
   // 导出组件工厂
   export { factoryMap };

3. 在使用方，引入组件工厂并通过key值获取对应的WrappedBuilder对象。

   // src/main/ets/ComponentFactory.ets
   // 导入组件工厂，路径需按照实际位置导入，此处仅做示例参考
   import { factoryMap } from '../view/FactoryMap';
   // ...
   // 通过组件工厂Map的key值获取对应的WrappedBuilder对象
   let myRadio: WrappedBuilder<[]> = factoryMap.get('Radio') as WrappedBuilder<[]>;
   let myCheckbox: WrappedBuilder<[]> = factoryMap.get('Checkbox') as WrappedBuilder<[]>;

4. 在使用方的组件build方法中，通过调用WrappedBuilder对象的builder方法获取具体组件。

   // src/main/ets/ComponentFactory.ets
   @Component
   struct ComponentFactory {
     build() {
    NavDestination() {
      Column({ space: CommonConstants.BUTTON_SPACING }) {
        // myRadio和myCheckbox是从组件工厂中获取的WrappedBuilder对象
        myRadio.builder();
        myCheckbox.builder();
      }
      .width(CommonConstants.ONE_HUNDRED_PERCENT)
      .padding($r('app.float.padding'))
    }
    .title(getResourceString($r('app.string.factory'), this))
     }
   }

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。