如何实现跨文件组件复用

在应用开发中，我们通常需要使用相同功能和样式的ArkUI组件，例如购物页面中会使用相同样式的Button按钮、Text显示文字，我们常用的方法是抽取公共样式或者封装成一个自定义组件到公共组件库中以减少冗余代码。

当需要适用于多个原生组件结合的场景，如Image+Text等复合自定义组件时，推荐使用跨文件组件复用方案。

具体实现可参考如下步骤：

1.提供方在公共组件库CommonText中创建公用的自定义组件ImageText，该组件支持外部传入attributeModifier属性。

export class ImageModifier implements AttributeModifier<ImageAttribute> { 
  width: number = 60; 
  height: number = 60; 
 
  constructor(width: number, height: number) { 
    this.width = width; 
    this.height = height 
  } 
 
  applyNormalAttribute(instance: ImageAttribute): void { 
    instance.width(this.width); 
    instance.height(this.height); 
  } 
} 
 
/* 
  自定义class实现text的AttributeModifier接口，用于初始化 
*/ 
export class TextModifier implements AttributeModifier<TextAttribute> { 
  textSize: number = 12; 
 
  constructor(textSize: number) { 
    this.textSize = textSize; 
  } 
 
  applyNormalAttribute(instance: TextAttribute): void { 
    instance.fontSize(this.textSize); 
    instance.fontColor(Color.Orange); 
    instance.textAlign(TextAlign.Center); 
    instance.border({ width: 1, color: Color.Orange, style: BorderStyle.Solid }); 
    instance.margin({ right: 10 }); 
  } 
} 
 
/* 
  自定义class实现checkbox的AttributeModifier接口，用于初始化 
*/ 
export class CheckboxModifier implements AttributeModifier<CheckboxAttribute> { 
  size: number = 15; 
 
  constructor(size: number) { 
    this.size = size; 
  } 
 
  applyNormalAttribute(instance: CheckboxAttribute): void { 
    instance.width(this.size); 
    instance.height(this.size); 
  } 
} 
 
/** 
 * 自定义封装图文组件 
 */ 
@Component 
export struct ImageText { 
  @State textOneContent: string | Resource = 'default'; 
  @State imageSrc: PixelMap | ResourceStr | DrawableDescriptor = $r('app.media.icon'); 
  //接受外部传入的AttributeModifier类实例,可以只定制部分组件，选择性传入参数。 
  @State textOne: AttributeModifier<TextAttribute> = new TextModifier(12); 
  @State imageModifier: AttributeModifier<ImageAttribute> = new ImageModifier(60, 60); 
  @State checkboxModifier: AttributeModifier<CheckboxAttribute> = new CheckboxModifier(15); 
 
  build() { 
    Row() { 
      Checkbox() 
        .attributeModifier(this.checkboxModifier) 
 
      Image(this.imageSrc) 
        .attributeModifier(this.imageModifier) 
        .margin({ right: 10 }) 
 
      Text(this.textOneContent) 
        .attributeModifier(this.textOne) 
        .fontColor(Color.Orange) 
    } 
    .padding({ top: 5 }) 
    .margin({ right: 10, bottom: 15 }) 
    .width(200) 
    .height(100) 
  } 
}

2.使用方分别实现Image组件、Text组件和checkbox的AttributeModifier接口实现类，然后使用自定义组件ImageText和入参，即可实现跨文件组件复用。

import { ImageText, ImageModifier, TextModifier, CheckboxModifier } from './CommonText'; 
 
@Entry 
@Component 
struct Details { 
  // 使用方创建提供方的AttributeModifier实现类实例 
  @State textOne: TextModifier = new TextModifier(36); 
  @State imageModifier: ImageModifier = new ImageModifier(100, 100); 
  @State checkboxModifier: CheckboxModifier = new CheckboxModifier(20); 
 
  build(){ 
    Row(){ 
      ImageText({ 
        textOne: this.textOne, 
        imageModifier: this.imageModifier, 
        imageSrc: $r('app.media.icon'), 
        checkboxModifier: this.checkboxModifier, 
        textOneContent: 'hello' 
      }) 
    } 
    .width('100%') 
    .height('100%') 
    .alignItems(VerticalAlign.Center) 
    .justifyContent(FlexAlign.Center) 
  } 
}