鸿蒙每日知识分享 - 组件重用样式

今天是 2025 年 1 月 21 日，今天要分享的鸿蒙知识点是如何定义组件的重用样式。

比如我们页面上有三个 Text 组件，背景色都是红色，且最小宽度为 200，那我们可以用下面的代码实现：

Column() {
  Text("文本1")
    .constraintSize({minWidth: 200})
    .backgroundColor(Color.Red)
  Text("文本2")
    .constraintSize({minWidth: 200})
    .backgroundColor(Color.Red)
  Text("文本2")
    .constraintSize({minWidth: 200})
    .backgroundColor(Color.Red)
}
.height('100%')
.width('100%')

可以看到，我们为每个 Text 组件都设置了背景色和最小宽度。虽然这样也可以实现效果，但这存在两个问题：

• 重复代码造成冗余
• 后续修改要修改三次，比如后面如果需要改为背景色为黄色，那我们要改三处代码。

为了解决上面的两个问题，我们可以用 @Styles 装饰器，将重复的样式封装起来，示例代码如下：

build() {
  Column() {
    Text("文本1")
      .textStyle();
    Text("文本2")
      .textStyle();
    Text("文本2")
      .textStyle();
  }
  .height('100%')
  .width('100%')
}

@Styles textStyle() {
  .constraintSize({minWidth: 200})
  .backgroundColor(Color.Red)
}

需要注意的是，@Styles 存在以下限制：

• 定义的样式函数不能传递参数。
• 定义的样式函数不支持导出。
• 定义的样式函数内不能使用逻辑(if)判断。