#鸿蒙通关秘籍#如何在HarmonyOS中创建和使用跨文件复合组件?

HarmonyOS
2024-12-03 10:31:00
633浏览
收藏 0
回答 1
回答 1
按赞同
/
按时间
YAML风吟浅

HarmonyOS中跨文件复合组件的复用适用于结合多个原生组件的场景,例如图文结合的自定义组件:

  1. 在公共组件库中创建一个支持attributeModifier的自定义组件:

    @Component
    export struct ImageText {
        @State item: string | Resource = $r('app.string.text');
        @State textOne: AttributeModifier<TextAttribute> = new TextModifier();
        @State imageModifier: AttributeModifier<ImageAttribute> = new ImageModifier();
    
        build() {
            Row() {
                Image($r('app.media.icon'))
                    .attributeModifier(this.imageModifier);
                Text(this.item)
                    .attributeModifier(this.textOne);
            }
        }
    }
    
    • 1.
    • 2.
    • 3.
    • 4.
    • 5.
    • 6.
    • 7.
    • 8.
    • 9.
    • 10.
    • 11.
    • 12.
    • 13.
    • 14.
    • 15.
  2. 使用方创建AttributeModifier实现类实例,并将其作为自定义组件的参数传入:

    @Component
    export struct ShoppingCart {
        @State textOne: CommodityText = new CommodityText(TextType.TYPE_ONE, 15);
        @State imageModifier: ImageModifier = new ImageModifier(100, 100);
    
        build() {
            ImageText({
                item: $r('app.string.text'),
                textOne: this.textOne,
                imageModifier: this.imageModifier
            });
        }
    }
    
    • 1.
    • 2.
    • 3.
    • 4.
    • 5.
    • 6.
    • 7.
    • 8.
    • 9.
    • 10.
    • 11.
    • 12.
    • 13.

通过这种方法,可以将复杂的组件结构封装成独立的模块,在不同的页面中进行灵活复用。

分享
微博
QQ
微信
回复
2024-12-03 13:29:52
相关问题