鸿蒙NEXT中如何抽取代码反复使用,减少冗余

441 阅读2分钟

鸿蒙中实现样式&结构重用

遇到重复模块不想再写一遍怎么办,遇到相同样式懒得写怎么办,他来了~ 他来了~\

image.png
1.@Extends: 扩展组件(样式、事件)只能全局定义
2.@Styles:抽取通用属性、事件
3.@Builder:自定义构建函数(结构、样式、事件)

@Extends
 //只可以扩展样式和事件 @Extend(样式、事件)
    @Extend(Text)
    //方法名不能同名,小可爱注意(●'◡'●)
    function textExtend(backgroudColor: ResourceColor, info: string) {
    //文字水平方向上居中
    .textAlign(TextAlign.Center)
    .backgroundColor(backgroudColor)
    .fontColor(Color.White)
    .fontSize(30)
    //点击事件
    .onClick(() => {
    //提示语句
    AlertDialog.show({'extend扩展组件!'})
    })


@Entry
@Component
struct Extends_demo {
 
  build() {
    Column({ space: 10 }) {
      Text(this.message)
        .fontSize(30)
      Swiper() {
        Text('0')
        //使用@Extend中抽取的方法传入参数,通过组件.方法名的方式点出来
          .textExtend(Color.Red, '轮播图 1')
        Text('1')
          .textExtend(Color.Green, '轮播图 2')
        Text('2')
          .textExtend(Color.Blue, '轮播图 3')
      }
      .width('100%')
      .height(160)
    }
    .width('100%')
    .height('100%')
  }
}
}
@Styles

@Styles 可以抽取 通用的事件和属性,比如:width、height、onClick...

作用:@Styles扩展通用样式和事件给多个组件使用,遇到多个相同样式时就可以轻松了*^____^*

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


@Component
struct FancyUse {
  // 在组件内定义
  @Styles fancy() {
      .通用属性()
      .通用事件(()=>{})
  }
}


// 使用
组件().fancy()//组内定义
组件().functionName()//全局定义

注意点:
1.@Styles不支持传递参数
2.在添加了Styles的组件中,添加样式可以覆盖Styles中的内容,所以有时候@styles失效可能是它的问题\

@Builder

最常用的来了,连结构一锅端---自定义构建函数\

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

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

注意点: 在组件内定义的通过this.函数名使用,内部可以通过this使用组件属性,但是but全局定义的不可以\

bbdde133dea75cd2928323ba524a3e45.gif
学会这几个就可以疯狂抽取了···
爽啦~ 爽啦~ 会代码抽取的人爽啦~(要记得代码的结构哦,不然就是真的爽啦!)