HarmonyOS--@Styles装饰器：定义组件重用样式

目录

概要

说明

技术细节

练习题

---

概要

当多个组件具有相同的样式时，若每个组件都单独设置，将会有大量的重复代码。为避免重复代码，可使用@Styles或者@Extend装饰器将多条样式设置提炼成一个方法，然后直接在各的位置进行调用，这样就能完成样式的复用了。

---

说明

@Styles语法结构：

  @Styles可以定义在组件内或全局，在全局定义时需在方法名前面添加function关键字，组件内定义时则不需要添加function关键字。

1、全局样式：

@Styles 
function functionName() { ... }

2.组件内样式：

@Entry
@Component
struct Index{
  // 组件内 
  @Styles 
  functionName() { ... } 
  build() {
    Text('原神，启动！')
      .functionName() 
  }
}

---

技术细节

1.当前 @Styles 仅支持 通用属性 和 通用事件。
2. @Styles 支持 全局 定义和 组件内 定义。
3.组件内@Styles的优先级高于全局@Styles。框架优先找当前组件内的@Styles，如果找不到，则会全局查找。
4.组件内的@Styles方法只能在当前组件中使用，全局的@Styles方法目前只允许在当前的.ets文件中使用。
5.组件内定义@Styles方法时不需要使用function关键字，全局的@Styles方法需要使用function关键字@Styles方法不支持参数。

---

练习题

需求：两个按钮，复用按钮的样式（用两种样式）：
    .width(100)
    .height(40)
    .borderRadius(10)

答案：

组件内引用：

@Entry
@Component
struct StylePage {


  build() {
    Column(){
      Row({space:30}){
        Button('确认').type(ButtonType.Normal)
          .backgroundColor(Color.Green)/*.width(150).height(60).borderRadius(10)*/
            //引用自定义样式
          .buttonStyle()
        Button('取消').type(ButtonType.Normal)
          .backgroundColor(Color.Grey)/*.width(150).height(60).borderRadius(10)*/
            //引用自定义样式
          .buttonStyle()
      }
    }
  }

  //组件内自定义样式
  @Styles buttonStyle(){
    .width(150)
    .height(60)
    .borderRadius(10)
  }
}

全局引用：

@Entry
@Component
struct StyleGlobalPageC3 {
  build() {
    Column(){
      Row({space:30}){
        Button('确认').type(ButtonType.Normal)
          .backgroundColor(Color.Green)/*.width(150).height(60).borderRadius(10)*/
          //引用全局样式
          .buttonStyleGlobal()
        Button('取消').type(ButtonType.Normal)
          .backgroundColor(Color.Grey)/*.width(150).height(60).borderRadius(10)*/
          //引用全局样式
          .buttonStyleGlobal()
      }
    }.width('100%')
    .height('100%')
    //对齐方式
    .justifyContent(FlexAlign.Center)
  }
}

//定义全局样式
@Styles function buttonStyleGlobal(){
  .width(150)
  .height(60)
  .borderRadius(10)
}

---

小结：

注意@Styles装饰器的使用方法，下篇文章我们将讲@Extend装饰器的使用方法及不同以便更好理解。