【HarmonyOS开发实战】鸿蒙UI通用代码几种抽离方法

前言

对于做APP的UI，免不了会写大量的重复布局，重复UI页面。此时对于将重复的UI控件抽离出来封装为通用组件来进行优化很是重要。
    
    本文重点分析鸿蒙几种UI处理上，如何抽离通用方法来进行UI的复用。重点对比@Style，@Extend, AttributeModifier， @Builder和 struct 这五种方法的区别和使用场景。

Styles装饰器

学过Android开发的小伙伴知道Android中有样式Style概念，我们定义好一个样式，那么就可以在各个组件中使用。从而保持每个组件有一样的属性。
    同理，鸿蒙中也可以使用样式。比如我们UI上的按钮具有相同的宽，高，背景色和边角距。那么我们就可以定义一个Style，每次定义按钮时候，只需要将Style赋给按钮就可以实现该属性，从而避免重复代码的书写。

●代码说明

如图，在当前页面内定义一个方法，使用装饰器Styles修饰，修饰后，方法内部就可以直接通过 .属性 的方式来定义属性了。方法定义完后，下方button里可以直接使用该方法。虽然我这里方法命名为commonButton，但是实际上所有基础控件都可以使用该方法使用里边的属性，比如下方的Text组件。

●Style特点

1.对于定义的方法，无法使用export修饰。
这也就意味着，我们抽离的通用属性，只能在当前页面内的组件上使用，换个页面就不可以了，无法做到全局所有页面通用。
2.对于定义的方法，只能定义组件的通用属性。
比如宽高，背景色等。对于一些控件特有属性是无法定义的。比如Select组件的selectedOptionFont特有属性无法定义。
3.方法不支持传递入参。
意味着该样式无法做到动态修改，只要定义好就无法修改。比如定义好宽高为30，而某个组件宽要求为40，其他属性都不变，那这个方法也没法用了。
4.方法为组件通用属性，故所有组件都可以引用方法。

Extend装饰器

对于Styles装饰器的第2点限制，鸿蒙推出了解决方案，那就是使用@Extend装饰器。
    Extend装饰器需要我们在使用时候指定定义哪个组件的属性，是专门抽离指定组件的。

●代码说明

Extend要求必须定义方法为在当前文件的全局定义，且也不能够export，同时定义时候需要指定是针对哪个控件。如图指定了控件Select，然后就可以指定Select的专有属性了。

●Extend特点

1.方法不支持export。
和Styles一样，无法真正做到为所有页面抽离出都可用的属性方法。
2.方法只能定义为当前页面内的全局方法。
一定程度上全局方法存在引用GlobalThis，具体副作用未知。
3.方法需要指定控件，其他控件无法使用，只能对专有控件做到了抽离
4.方法可以传入参。相比Styles, 可以在其他属性不变