【如此之白】ETS装饰器 @BuilderParam与@Styles 原创 精华

如此之白
发布于 2022-4-24 11:42
浏览
7收藏

在查看common.d.ts声明文件的时候发现有两个文档上没见过的常量

/**
 * Defining BuilderParam PropertyDecorator
 * @since 7
 */
declare const BuilderParam: PropertyDecorator;

/**
 * Defining Styles MethodDecorator
 * @since 8
 */
declare const Styles: MethodDecorator;

@BuilderParam 是一个变量装饰器
@Styles 是一个方法装饰器

@BuilderParam

这个装饰器有什么用呢,我们来看一段这样的代码。
使用IDE: DevEco Studio 3.0 Beta3

eTS的自定义组件似乎没有为我们供Slot插槽,如果我们给自定义组件加上一个大括号和子组件会怎么样呢?

@Component
struct TestComponent {
  build() {
    Column() {}
  }
}

@Entry
@Component
export struct MainPage {
  build() {
    Column() {
      TestComponent() {
        Text('aaaaaaaaaaaa').fontSize(30)
      }
    }
    .height('100%')
    .width('100%')
  }
}

刷新Previewer会发现报错了。
查看PreviewerLog:
【如此之白】ETS装饰器 @BuilderParam与@Styles-鸿蒙开发者社区
在这里我们很明显发现了一个关键词@BuilderParam。那么我们尝试给自定义组件TestComponent添加一个装饰器方法并试着执行他。

@Component
struct TestComponent {
  @BuilderParam builder:()=>{}

  build() {
    Column() {
      this.builder()
    }
  }
}

刷新Previewer
【如此之白】ETS装饰器 @BuilderParam与@Styles-鸿蒙开发者社区
居然成功了!去真机上确定下效果。
【如此之白】ETS装饰器 @BuilderParam与@Styles-鸿蒙开发者社区

看来以后再也不需要ForEach来实现插槽了
注意:一个组件内只允许有一个@BuilderParam装饰器
【补充】刚发现一个问题 @BuilderParam 装饰器与 @Link 装饰器无法同时存在,待研究。
【补充】如果是引用有@BuilderParam组件所在文件,会出现错误,暂时只支持组件都在同一文件中

@BuilderParam还有个有趣的地方,如果我们想办法把他打印出来,会发现不论我们之前给他定义成什么数据类型,他都会是一个方法。

@Component
struct TestComponent {
  @BuilderParam builder: string

  build() {
    Scroll() {
      Text(this.builder.toString()).fontSize(20)
    }
    .height('100%')
    .width('100%')
  }
}

效果:
【如此之白】ETS装饰器 @BuilderParam与@Styles-鸿蒙开发者社区

@Styles

这个是API8 提供的一个新的装饰器,我们知道@Extend装饰器不能写在组件内,但@Styles却能够定义在组件内。
@Styles和@Extend一样,也是提供方法将新的属性函数添加到内置组件。
在验证中发现了几个注意的点:

  • @Styles装饰的方法不能带参数
  • 组件内@Styles装饰的方法可以有多个
  • 后面执行的属性函数优先级最高
@Component
struct TestComponent {
  @BuilderParam builder:()=>{}

  @Styles backgroundRed(){
    .backgroundColor(Color.Red)
    .width(300)
    .height(100)
  }

  build() {
    Column() {
      this.builder()
    }
    .backgroundRed()
  }
}

效果:
【如此之白】ETS装饰器 @BuilderParam与@Styles-鸿蒙开发者社区

@Component
struct TestComponent {
  @BuilderParam builder:()=>{}

  @Styles backgroundRed(){
    .backgroundColor(Color.Red)
    .width(300)
    .height(100)
  }

  @Styles backgroundBlue(){
    .backgroundColor(Color.Blue)
  }

  build() {
    Column() {
      this.builder()
    }
    .backgroundRed()
    .backgroundBlue()
  }
}

效果:
【如此之白】ETS装饰器 @BuilderParam与@Styles-鸿蒙开发者社区

如果自定义组件也能有自己的属性函数就更好了

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
已于2022-9-7 11:45:33修改
9
收藏 7
回复
举报
7条回复
按时间正序
/
按时间倒序
红叶亦知秋
红叶亦知秋

感谢楼主的发现分享,马上试试

2
回复
2022-4-24 14:05:39
民之码农
民之码农

666

1
回复
2022-4-25 08:05:05
wx65981ca6191b4
wx65981ca6191b4

TestComponent() {  Text('Test Hello')    .fontSize(30)}

{}里面的是要给子组件TestComponent传递参数,所以要会报 

@BuilderParam expects no parameter

这个错误

回复
2024-1-5 23:30:54
物联风景
物联风景

不错不错,挺好的!

回复
2024-1-8 09:59:41
mb659d015fa365a
mb659d015fa365a

楼主你好,我创建的空项目,真机运行报错:Failure[INSTALL_PARSE_FAILED_USESDK_ERROR]。 请问怎么处理,我用的真机是HarmonyOS3.0.0的版本,终端查询到apiversion时6,releaseType是Release。 请问如何设置才能正常运行呢

回复
2024-1-9 16:36:56
mb659d015fa365a
mb659d015fa365a 回复了 mb659d015fa365a
楼主你好,我创建的空项目,真机运行报错:Failure[INSTALL_PARSE_FAILED_USESDK_ERROR]。 请问怎么处理,我用的真机是HarmonyOS3.0.0的版本,终端查询到apiversion时6,releaseType是Release。 请问如何设置才能正常运行呢

再论坛里我找了一些帖子,发现帖子都比较老,IDE的设置项我的IDE看不到,我的IDE版本是 DevEco Studio 3.1.1 Release。 折腾一下午也没解决,修改了项目中的build-proifle.json5中的两个字段,点击Sync Now后依然报错。

回复
2024-1-9 16:39:11
轩秋夜雨
轩秋夜雨 回复了 mb659d015fa365a
再论坛里我找了一些帖子,发现帖子都比较老,IDE的设置项我的IDE看不到,我的IDE版本是 DevEco Studio 3.1.1 Release。 折腾一下午也没解决,修改了项目中的build-proifle.json5中的两个字段,点击Sync Now后依然报错。
1
回复
2024-1-10 13:39:34
回复
    相关推荐