鸿蒙UI通用代码几种抽离方法

    对于做APP的UI，免不了会写大量的重复布局，重复UI页面。此时对于将重复的UI控件抽离出来封装为通用组件来进行优化很是重要。

    本文重点分析鸿蒙几种UI处理上，如何抽离通用方法来进行UI的复用。重点对比@Style，@Extend, AttributeModifier， @Builder和 struct 这五种方法的区别和使用场景。

Styles装饰器

    学过Android开发的小伙伴知道Android中有样式Style概念，我们定义好一个样式，那么就可以在各个组件中使用。从而保持每个组件有一样的属性。

    同理，鸿蒙中也可以使用样式。比如我们UI上的按钮具有相同的宽，高，背景色和边角距。那么我们就可以定义一个Style，每次定义按钮时候，只需要将Style赋给按钮就可以实现该属性，从而避免重复代码的书写。

• 
  
• 代码说明
  

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

• 
  
• Style特点
  

Extend装饰器

    对于Styles装饰器的第2点限制，鸿蒙推出了解决方案，那就是使用@Extend装饰器。

    Extend装饰器需要我们在使用时候指定定义哪个组件的属性，是专门抽离指定组件的。

• 
  
• 代码说明
  

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

• 
  
• Extend特点
  

AttributeModifier

    对于上述两个装饰器都存在一个相同的限制，就是无法做到全局所有文件都可以公用。

    AttributeModifier的出现可以变相的解决这个问题。AttributeModifier本意是用于自定义控件中设置属性用的。但是我们在这里也可以通过这个机制，来实现全局所有文件中控件均可通用的属性。

• 
  
• 代码说明
  

    该Modifier只能针对专用控件，比如我要抽离一个通用的TextInput，那么我可以如上图所定义。

    需要实现一个接口 AttributeModifier，接口泛型定义和我们想要给哪个控件使用有关，比如我们想给TextInput使用，那么泛型就是 TextInputAttribute，如果给Column使用，那么泛型就是ColumnAttribute，以此类推。

    在该接口的实现方法中，定义控件的属性。

• 
  
• 布局中使用
  

• 
  
• 自定义属性
  

    我们还可以自定义部分属性，只需要修改TextInputAttribute，例如我们想自定义字体大小。可以定义变量。

• 
  
• 使用
  

• 
  
• AttributeModifier特点
  

@Builder

    上述说的都是针对单独的控件，如果我们想抽离一个通用的布局呢？或者我们的控件就是固定的可以拿来到处使用。

    比如我有一个Text，各种属性固定，只是文案不同，那么我使用上述几种都比较麻烦，需要书写较多代码。那么这个时候就可以使用builder了。

• 
  
• 代码
  

    我们可以在任意需要展示该Text的地方使用，直接调用该方法，对应位置就可以显示出内容了。原理相当于是将方法内的控件代码放到了对应的位置上。

• 
  
• 使用
  

• 
  
• @Builder特点
  

struct

    有时候，我们可能页面中存在大量如下UI：

    对于这种UI，我们完全可以抽离出为一个控件。然后我们页面需要展示的地方，直接调用该控件，设置标题，按钮文案等就可以简化了。

    我们可能想到使用builder来定义，但是builder只能写纯UI代码，这里还涉及到用户输入的内容，如何在点击按钮时候传过去。所以builder就无法使用了，这个时候就可以用struct封装了。

• 
  
• 代码
  

@Component

export struct InputNumberItemWithButton {

  label: string = "标题"

  buttonClick: (v: number) => void = () => {

  }

  buttonLabel: string = "设置"

  inputPlaceholder: string = "我是提示语"

  inputId: string = this.label

  parentWidth: string = '100%'

  private value: number = 0


  build() {

    RelativeContainer() {

      Text(this.label)

        .attributeModifier(Modifier.textLabel())

        .id('label1')

        .alignRules({
left: { anchor: '__container__', align: HorizontalAlign.Start },
top: { anchor: '__container__', align: VerticalAlign.Top },
bottom: { anchor: '__container__', align: VerticalAlign.Bottom }

        })

        .margin({ left: 2 })

TextInput({ placeholder: this.inputPlaceholder })

        .onChange((value: string) => {

          this.value = Number.parseInt(value) ?? 0

        })

        .type(InputType.Number)

        .id(this.inputId)

        .height(30)

        .placeholderFont({ size: 10 })

        .fontSize(CommonStyle.INPUT_TEXT_SIZE)

        .borderRadius(4)

        .alignRules({
right: { anchor: 'button1', align: HorizontalAlign.Start },
left: { anchor: 'label1', align: HorizontalAlign.End },
top: { anchor: '__container__', align: VerticalAlign.Top },
bottom: { anchor: '__container__', align: VerticalAlign.Bottom }

        })

        .margin({ left: 6, right: 6 })

Button(this.buttonLabel)

        .attributeModifier(SuBaoSmallButtonModifier.create())

        .onClick(() => {

          this.buttonClick(this.value)

        })

        .id('button1')

        .alignRules({
right: { anchor: '__container__', align: HorizontalAlign.End },
top: { anchor: '__container__', align: VerticalAlign.Top },
bottom: { anchor: '__container__', align: VerticalAlign.Bottom }

        })

        .margin({ right: 2 })

    }
.width(this.parentWidth)
.height(40)
.padding({
left: 5,
right: 5,
top: 2,
bottom: 2

    })
.borderRadius(4)

  }

}

    该struct中通过维护一个变量value 来保存用户输入的数字，然后在用户点击按钮时候传给点击事件方法，交给调用者调用。

• 
  
• 使用
  

    点击设置按钮，点击事件触发，a直接赋值。

• 
  
• struct特点
  

对比各个使用场景

    实际编程中，一般都是混合相互配合使用，没必要单独硬使用哪一个。