HarmonyOS NEXT鸿蒙开发：@Styles装饰器：定义组件重用样式-马育民老师

# 提出问题

[官网指南](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-style-V5 "官网指南")

当实现 **多个 样式相同 的控件** 时，需要大量写 **重复的样式代码**，如下图例子，实现下图效果：

[![](https://www.malaoshi.top/upload/0/0/1GW4dEgCwj4.jpg)](https://www.malaoshi.top/upload/0/0/1GW4dEgCwj4.jpg)

代码如下：

```
@Entry
@Component
struct ChongyongStyleDemo {
  @State message: string = 'Hello World';

build() {
    Column() {
      Row(){
        Text("内容")
          .fontSize(20)
      }
      .width("90%")
      .borderRadius(10)
      .backgroundColor("#ddd")
      .margin({
        bottom:4
      })
      .padding({
        top:20,
        left:20,
        right:20,
        bottom:20,
      })

Row(){
        Text("内容")
          .fontSize(20)
      }
      .width("90%")
      .borderRadius(10)
      .backgroundColor("#ddd")
      .margin({
        bottom:4
      })
      .padding({
        top:20,
        left:20,
        right:20,
        bottom:20,
      })

Row(){
        Text("内容")
          .fontSize(20)
      }
      .width("90%")
      .borderRadius(10)
      .backgroundColor("#ddd")
      .margin({
        bottom:4
      })
      .padding({
        top:20,
        left:20,
        right:20,
        bottom:20,
      })
    }
    .height('100%')
    .width('100%')
  }

}
```

### 缺点

每个 `Row` 的样式代码都相同，如下：

```
.width("90%")
.borderRadius(10)
.backgroundColor("#ddd")
.margin({
  bottom:4
})
.padding({
  top:20,
  left:20,
  right:20,
  bottom:20,
})
```

**大量重复代码**，一旦需要修改样式，每个 `Row` 的样式代码 **都需要修改**，**不利于维护**

### 解决

使用 `@Styles` 装饰器，定义组件重用样式，相当于CSS样式

# @Styles介绍

当多个控件有相同的样式时，不必给每个控件编写重复的样式代码，可以用 `@Styles` 装饰器，将 **重复样式** 提炼成一个方法，供控件调用

**类比：**相当于定义 CSS样式，供样式相同的元素使用

# 定义

`@Styles`可以定义在 **组件内** 或 **全局**

## 优先级：

组件内 `@Styles` 的优先级高于全局 `@Styles`。框架优先找当前组件内的@Styles，如果找不到，则会全局查找。

## 定义在组件内

组件内定义时则不需要添加 `function` 关键字

#### 例子

修改上面的代码，增加方法 `@Styles rowStyle()`，将 `Row` 样式提取到该方法中，代码如下：

```
@Styles rowStyle(){

.width("90%")
  .borderRadius(10)
  .backgroundColor("#ddd")
  .margin({
    bottom:4
  })
  .padding({
    top:20,
    left:20,
    right:20,
    bottom:20,
  })
}
```

使用，在每个 `Row` 调用 `.rowStyle()`，如下：

```
Row(){
  Text("内容")
    .fontSize(20)
}
.rowStyle()

Row(){
  Text("内容")
    .fontSize(20)
}
.rowStyle()

Row(){
  Text("内容")
    .fontSize(20)
}
.rowStyle()
```

##### 完整代码

```
@Entry
@Component
struct ChongyongStyleDemo {
  @State message: string = 'Hello World';

build() {
    Column() {
      Row(){
        Text("内容")
          .fontSize(20)
      }
      .rowStyle()

Row(){
        Text("内容")
          .fontSize(20)
      }
      .rowStyle()

Row(){
        Text("内容")
          .fontSize(20)
      }
      .rowStyle()
    }
    .height('100%')
    .width('100%')
  }

@Styles rowStyle(){

.width("90%")
    .borderRadius(10)
    .backgroundColor("#ddd")
    .margin({
      bottom:4
    })
    .padding({
      top:20,
      left:20,
      right:20,
      bottom:20,
    })
  }
}
```

## 定义在全局

在全局定义时需在方法名前面添加 `function` 关键字，其他用法与 定义在组件内 类似

# 支持通用属性、通用事件

当前 `@Styles` 仅支持 [通用属性](https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-size-V5 "通用属性") 和 [通用事件](https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-events-click-V5 "通用事件")

# 不支持参数

@Styles方法不支持参数，反例如下。
```
// 反例： @Styles不支持参数
@Styles function globalFancy (value: number) {
  .width(value)
}
```

原文出处：http://malaoshi.top/show_1GW4deUX44s.html