#鸿蒙通关秘籍#鸿蒙应用如何通过自定义组件实现公共组件的复用？

在鸿蒙应用中，通过自定义组件来实现公共组件的复用，步骤如下：

1. 定义自定义组件，支持传入多个AttributeModifier：

   javascript @Component export struct ImageText { @State textOne: AttributeModifier<TextAttribute> = new TextModifier(); @State imageModifier: AttributeModifier<ImageAttribute> = new ImageModifier();

   build() { Row() { Image(this.imageSrc) .attributeModifier(this.imageModifier); Text(this.textOneContent) .attributeModifier(this.textOne) .fontColor($r('app.color.orange')); } } }

   class ImageModifier implements AttributeModifier<ImageAttribute> { applyNormalAttribute(instance: ImageAttribute): void { instance.width($r('app.float.float_100')); instance.height($r('app.float.float_100')); } }

   class TextModifier implements AttributeModifier<TextAttribute> { applyNormalAttribute(instance: TextAttribute): void { instance.fontSize($r('app.float.float_12')); instance.fontColor($r('app.color.orange')); } }

2. 使用组件时，提供定制的AttributeModifier实例：

   javascript @Component export struct ShoppingCart { @State textOne: CommodityText = new CommodityText(TextType.TYPE_ONE, 15); @State imageModifier: ImageModifier = new ImageModifier(100, 100);

   build() { ImageText({ item: item, textOne: this.textOne, imageModifier: this.imageModifier, imageSrc: $r('app.media.icon'), }); } }

通过使用自定义组件，开发者可以实现不同页面和场景下的组件复用，减少了冗余代码。