鸿蒙开发 -- ui结构样式复用

一、样式复用

@Styles  

1.组件内的 @styles 方法只能在当前组件中使用，全局的 @styles 方法目前只允许在当前的 .ets文件 中使用

2.组件内定义 @styles 方法时不需要使用 function 关键字，全局的 @styles 方法需要使用 function 关键字
3. @styles 方法中只能包含通用属性方法和通用事件方法
4. @styles 方法不支持参数

@Entry
@Component
struct Index {

  build() {
      Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceAround, alignItems: ItemAlign.Center }) {

        Button('确认', { type: ButtonType.Capsule, stateEffect: true })
          .compButtonStyle()
        Button('取消', { type: ButtonType.Capsule, stateEffect: true })
          .globalButtonStyle()
        })
    }
    .width('100%').height('100%')
  }
  
  // 局部样式
  @Styles compButtonStyle() {
    .width(100)
    .height(40)
    .fontSize(20)
  }
}

// 全局样式
@Styles function globalButtonStyle() {
  .width(100)
  .height(40)
  .fontSize(20)
}

@Extend

1.@Extend 方法只能定义在全局，使用范围目前只限于当前的.ets文件
2.@Extend 方法用于特定类型的组件，因此可包含该组件的专有属性方法和专有事件方法
3.@Extend 方法支持参数

@Entry
@Component
struct Index {

  build() {
      Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceAround, alignItems: ItemAlign.Center }) {

        Button('确认')
          .buttonStyle(Color.Gray)
        Button('取消')
          .width(100)
          .height(40)
          .fontSize(20)
          .type(ButtonType.Capsule)
          .backgroundColor(Color.Green)
        })
    }
    .width('100%').height('100%')
  }
}

// 全局样式
@Extend function buttonStyle(color: Color) {
  .width(100)
  .height(40)
  .fontSize(20)
  .type(ButtonType.Normal)
  .backgroundColor(color)
}

二、结构复用

@Builder

1.组件内的 @Builder 方法可通过 this 访问当前组件的属性和方法，而全局的 @Builder 方法则不能

2.组件内的 @Builder 方法只能用于当前组件，全局的 @Builder 方法导出(export )后，可用于整个应用。

@Entry
@Component
struct Index {

  build() {
      Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceAround, alignItems: ItemAlign.Center }) {
        
        // 局部 结构复用
        compButtonBuilder($r('app.media.icon_send'), Color.Red, '发送', () => console.log('发送'))

        Button('取消'){
            Row({ space: 10 }) {
                Image($r('app.media.icon_cancel'))
                    .width(25).height(25)
                Text('取消')
                    .fontColor(Color.Green)
                    .fontSize(25)
            }
        }.width(100).height(40).onClick(() => {
            console.log('取消')
        })
        
        // 全局 结构复用
        globButtonBuilder($r('app.media.icon_cancel'), Color.Green, '取消', () => console.log('取消'))
    }
    .width('100%').height('100%')
  }

  // 局部
  @Builder compButtonBuilder(icon: Resource, color: Color, value: string, callback: () => 
  void) {
    Button(){
      Row({ space: 10 }) {
        Image(icon)
          .width(25).height(25)
        Text(value)
          .fontColor(color)
          .fontSize(25)
      }
    }.width(100).height(40).onClick(callback)
  }
}

// 全局
@Builder export function globButtonBuilder(icon: Resource, color: Color, value: string, callback: () => void) {
  Button(){
    Row({ space: 10 }) {
      Image(icon)
        .width(25).height(25)
      Text(value)
        .fontColor(color)
        .fontSize(25)
    }
  }.width(100).height(40).onClick(callback)
}

@Builder 方法具有两种参数传递机制-按值传递和按引用传递。当只有一个参数且参数为对象字面量时为按引用传递，其余情况均为按值传递。
按引用传递时，若传递的参数为状态变量，则状态变量的变化将会触发 @Builder 方法内部UI的刷新;按值传递时则不会

若复用的UI结构没有状态，推荐使用 @Builder 方法，否则使用自定义组件。

@BuilderParam

@Builderparam 用于装饰自定义组件(struct)中的属性，其装饰的属性可作为一个U!结构的占位符，待创建该组件时，可通过参数为其传入具体的内容。(其作用类似于Vue框架中的slot)。