【HM】ArkUI 元素的样式可以通过@Extend扩展为公共样式，供更多的元素使用，减少代码量

原创已于 2024-05-29 23:33:38 修改 · 375 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#鸿蒙 #arkui #DevEco Studio #Harmony OS

于 2024-05-29 23:32:08 首次发布

类似抽象封装函数/方法一样，在function关键字前面加上@Extend扩展装饰器。

Column() {
// 按钮1和按钮2有相同的样式
Button('按钮1')
  .fontSize(15)
  .height(40)
  .layoutWeight(1)
  .fontColor('#17A98E')
  .backgroundColor('#00000000')

Button('按钮2')
  .fontSize(15)
  .height(40)
  .layoutWeight(1)
  .fontColor('#17A98E')
  .backgroundColor('#00000000')
}

// 把相同样式抽离出来，通过@Extend扩展一个公共的样式函数：

@Extend(Button) function btnStyle() {
  .fontSize(15)
  .height(40)
  .layoutWeight(1)
  .fontColor('#17A98E')
  .backgroundColor('#00000000')
}

// 按钮1和按钮2的样式表达式可以简化为：

Button('按钮1')
  .btnStyle()

Button('按钮2')
  .btnStyle()