鸿蒙装饰器之样式与结构重用@Style@Bulid@Extend

187 阅读2分钟

@Extend

通过 Extend 可以扩展组件的样式事件,实现复用效果

@Extend仅支持在全局定义,不支持在组件内部定义。

语法: @Extend(组件名) 
function functionName(参数1....) {
.属性()
.事件(()=>{})
}

// 使用
组件(){}
.functionName(参数1...)

@Extend (Text)
function myExtend(){
  .width(100)
  .height(100)
  .backgroundColor(Color.Pink)
  .margin({bottom:50})
  .onClick(()=>{
    AlertDialog.show({
      message:'hello'
    })
  })
}
@Entry
@Component
struct Index {
  build() {
    Column() {
      Text()
        .myExtend()
      Text()
        .myExtend()
    }
  }
}

image.png

image.png

@Style

@Styles装饰器可以将多条样式设置提炼成一个方法,直接在组件声明的位置调用。通过@Styles装饰器可以快速定义并复用自定义样式。

不同于@Extend 用来给某个组件扩展,@Styles 可以抽取 通用的事件和属性。

语法: // 全局定义 @Styles function functionName() { .通用属性() .通用事件(()=>{}) } @Component

struct FancyUse {

// 在组件内定义

@Styles fancy() {

.通用属性()

.通用事件(()=>{})

} }

// 使用

组件().fancy()

组件().functionName()

// 全局定义
@Styles function setSize() {
  .width(100)
  .height(100)
  .onClick(()=>{
    // 逻辑略
  })
}
@Entry
@Component
struct Index {
  // 在组件内定义
  @Styles setBg() {
    .backgroundColor(Color.Red)
  }
  build() {
    Column() {
      Text()
        .setSize()
        .setBg()
    }
  }
}

image.png

@Bulid

ArkUI提供了一种轻量的UI元素复用机制@Builder,该自定义组件内部UI结构固定,仅与使用方进行数据传递,开发者可以将重复使用的UI元素抽象成一个方法,在build方法里调用。

如果连结构也需要抽取,就可以使用@Builder,他也可以叫做 自定义构建函数 语法:

// 自定义 全局 构建函数
@Builder function MyGlobalBuilderFunction(param1,param2...) {
// 结构、属性、事件放这里
}
// 使用
MyGlobalBuilderFunction(param1,param2...)

// 自定义 组件内 构建函数
@Builder MyBuilderFunction( param1,param2...) {
// 结构、属性、事件放这里
}
// 使用
this.MyBuilderFunction(param1,param2...)

//定义全局 Builder
@Builder
function GlobalTextItem(title: string) {
  Text(title)
    .fontSize(30)
    .onClick(() => {
      // 逻辑略
    })
}
@Entry
@Component
struct Index {
  @State message: string = '@Builder';
  build() {
    Column() {
      // 使用全局 Builder
      GlobalTextItem('你好')
      // 使用本地 Builder
      this.LocalTextItem('西兰花炒蛋')
    }
    .width('100%')
    .height('100%')
  }
  //定义本地 Builder
  @Builder
  LocalTextItem(title: string) {
    Text(title)
      .fontSize(30)
      .onClick(() => {
        // 逻辑略
      })
  }
}

image.png

总结:

extend与build可以进行传参,而style则不能进行传参

extend抽取 特定组件 样式、事件

style抽取 公共样式、事件

build抽取 结构、样式、事件