harmonyOS 组件通用样式 @Styles

本文主要是介绍harmonyOS 组件通用样式 @Styles，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

我们本文来说自定义组件重用样式
关键在于关键字 @Styles

例如我们界面中有这样一段代码
在这里插入图片描述
可以看出三个Text组件的样式是一模一样的那么如果有一百个我们后面的样式就要写一百遍吗？

我们可以直接将代码改成这样

@Entry
@Component
struct Index {@Styles beCurrent () {.width(200).height(108).backgroundColor(Color.Gray).margin({top:10})}build() {Row() {Column() {Text("你好 世界").beCurrent().fontSize(40)Text("这世界 我来了").beCurrent().fontSize(40)Text("啦啦啦").beCurrent().fontSize(40)}.width('100%')}.height('100%')}
}

首先我们定义了一个用@Styles修饰的函数我们取名叫 beCurrent 顾名思义通用的
然后里面写了一些通用样式
这里需要强调 fontSize是不能往这种通用样式函数里写的因为不是所有组件都能用
我们三个Text 都使用了这个 beCurrent 然后单独设置了fontSize样式

然后运行结果如下
在这里插入图片描述
然后不一定要写在组件里面和我们自定义组件一样可以写在外面

@Entry
@Component
struct Index {build() {Row() {Column() {Text("你好 世界").beCurrent().fontSize(40)Text("这世界 我来了").beCurrent().fontSize(40)Text("啦啦啦").beCurrent().fontSize(40)}.width('100%')}.height('100%')}
}@Styles function beCurrent () {.width(200).height(108).backgroundColor(Color.Gray).margin({top:10})
}