鸿蒙OH实战开发：跨文件样式复用和组件复用

---

📚往期学习笔录📝：

📝 鸿蒙应用开发与鸿蒙系统开发哪个更有前景？

📝 嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~

📝 对于大前端开发来说，转鸿蒙开发究竟是福还是祸？

📝 鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？

📝 记录一场鸿蒙开发岗位面试经历~

📝 持续更新中……

---

介绍

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

效果图预览

使用说明：

1. 点击购物车页面的list列表跳转商品详情页。
2. 两个页面的button组件、text组件、Image等组件复用相同的样式。
3. 购物车页面使用了自定义封装的Image+Text的图文复合组件。

实现思路

一、跨文件样式复用

适用场景：当需要向外提供单一组件的样式定制效果时，推荐使用这种方案。使用方在调用接口时，编码量相对方式二更少，仅需几行即可完成调用，使用便捷。

1. 提供方创建AttributeModifier接口的实现类。

   // attributeModifier.ets
   
   /*
     自定义class实现Text的AttributeModifier接口
   */
   export class CommodityText implements AttributeModifier<TextAttribute> {
        
     textType: TextType = TextType.TYPE_ONE;
     textSize: number = 15;
   
     constructor( textType: TextType, textSize: number) {
        
       this.textType = textType;
       this.textSize = textSize;
     }
   
     applyNormalAttribute(instance: TextAttribute): void {
        
       if (this.textType === TextType.TYPE_ONE) {
        
         instance.fontSize(this.textSize);
         instance.fontColor($r('app.color.orange'));
         instance.fontWeight(FontWeight.Bolder);
         instance.width($r('app.string.max_size'));
       } else if (this.textType === TextType.TYPE_TWO) {
        
         instance.fontSize(this.textSize);
         instance.fontWeight(FontWeight.Bold);
         instance.fontColor($r('sys.color.ohos_id_counter_title_font_color'));
         instance.width($r('app.string.max_size'));
       } else if (this.textType === TextType.TYPE_Three) {
        
         instance.fontColor(Color.Gray);
         instance.fontSize(this.textSize);
         instance.fontWeight(FontWeight.Normal);
         instance.width($r