【鸿蒙开发基础】Harmony OS Next-@Styles修饰符

载物于心

已于 2025-01-07 14:24:44 修改

阅读量658

点赞数 14

文章标签：鸿蒙

于 2024-12-09 11:26:12 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_74851434/article/details/144339687

版权

1.@Styles修饰符是什么？

在Harmony OS Next中，@Styles修饰符用于保存公共属性，公共属性就是给每一个组件都可以设置的属性，比如宽度和高度，或者圆角设置，有些是特殊属性，只能给特定的组件进行设置，比如Text()可以设置的特殊属性有fontStyle和fontWeight。在Row()组件中就无法设置这两个属性，这是Text()所特有的属性。而width和height在Text()和Row()中都可以设置，因为这是通用属性。

@Entry
@Component
struct useStyle {
  @Styles rowStyle(){

.width(80)   //设置公共属性宽度
.height(80)   //设置公共属性高度
   
.fontStyle() //会直接报错，因为@styles中无法设置特殊属性


}
  build() {
Column(){
  Row({space: 20}){
   
  }
}
  }
}

图1

1.1@Styles修饰符通用属性的使用

我们说过，@Styles修饰符可以保存组件样式的通用属性，也就是说，我们可以将它看为一个存储器的命名语法，我们使用@Styles定义一个样式，将它存储在函数中，然后就可以对它进行复用。这里说明一下为什么使用的是函数，因为函数的目的就是重复执行函数内部定义好的语句。当遇到有相同公共样式的组件时，可以直接拿来使用，不需要重复定义，节省开发时间，提升开发效率。

@Entry
@Component
struct useStyle {
//使用@styles修饰符定义公共样式
  @Styles rowStyle(){
.width(80)
    .height(80)
    .borderRadius(8)

//为了使得样式明显，这里使用背景色
 .backgroundColor(Color.Red)

}
  build() {
Row({space:20}){

//需求：定义四个长宽都为80的Row()组件，并且它的圆角为8，那么，我们使用刚刚定义好的rowStyle（）一键复用，就可快速实现样式定义的需求
  Row(){

  }
  .rowStyle() //使用@styles定义的公共样式

  Row(){

  }

  .rowStyle()

  Row(){

  }

  .rowStyle()

  Row(){

  }

  .rowStyle()

}
  }
}

图2

以下是实现后的效果图

图3

大家可以看到，一个简单的公共属性复用就实现了。日后在我们开发的过程中，如果需要使用公共属性重复样式的组件，那么就可以考虑使用@styles修饰符完成需求。

1.2@Styles通用事件的使用

通用事件的定义，其实和通用属性类似，就是可以在多个不同类型的组件中都能生效的事件，就是通用事件。需求也类似，在多个组件中都需要使用同一个事件，那我们就用@styles将它封装起来，然后在想使用的组件下输入复用即可。

import { promptAction } from '@kit.ArkUI'
//导入prompt包

@Entry
@Component
struct useStyle {

//定义按钮样式1

  @Styles
  ButtonStyle1(){
    .width(80)
    .height(80)
    .borderRadius(8)

    .backgroundColor(Color.Red)
    .onClick(() => {
      promptAction.showToast({ message: '点击成功' })
    })
  }

//定义按钮样式2

  @Styles
  ButtonStyle2(){
    .width(80)
    .height(80)
    .borderRadius(8)

    .backgroundColor(Color.Green)
    .onClick(() => {
      promptAction.showToast({ message: '点击失败' })
    })
  }

//定义按钮样式3

  @Styles
  ButtonStyle3(){
    .width(80)
    .height(80)
    .borderRadius(8)

    .backgroundColor(Color.Yellow)
    .onClick(() => {
      promptAction.showToast({ message: '重新加载' })
    })
  }

  build() {
Row({space:20}){
  Row(){
Button(){
  Text('点击')

}
.ButtonStyle1()
    Button(){
      Text('点击')
    }
    .ButtonStyle2()

    Button(){
  Text('点击')
    }
    .ButtonStyle3()
  }
.width('100%')
.padding(50)
}
  }
}