HarmonyOS 应用开发之@Styles装饰器：定义组件重用样式_harmonyos

最新推荐文章于 2024-10-01 14:53:57 发布

2301_78398209

最新推荐文章于 2024-10-01 14:53:57 发布

阅读量665

点赞数 24

分类专栏： 2024年程序员学习文章标签： harmonyos 华为

本文链接：https://blog.csdn.net/2301_78398209/article/details/137566938

版权

2024年程序员学习专栏收录该内容

262 篇文章 2 订阅

订阅专栏

从API version 9开始，该装饰器支持在ArkTS卡片中使用。

装饰器使用说明

当前@Styles仅支持通用属性和通用事件。
@Styles方法不支持参数，反例如下。

// 反例： @Styles不支持参数
@Styles function globalFancy (value: number) {
.width(value)
}

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

说明：
只能在当前文件内使用，不支持export

// 全局
@Styles function functionName() { … }

// 在组件内
@Component
struct FancyUse {
@Styles fancy() {
.height(100)
}
}

定义在组件内的@Styles可以通过this访问组件的常量和状态变量，并可以在@Styles里通过事件来改变状态变量的值，示例如下：

@Component
struct FancyUse {
@State heightValue: number = 100
@Styles fancy() {
.height(this.heightValue)
.backgroundColor(Color.Yellow)
.onClick(() => {
this.heightValue = 200
})
}
}

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

使用场景

以下示例中演示了组件内@Styles和全局@Styles的用法。

// 定义在全局的@Styles封装的样式
@Styles function globalFancy () {
.width(150)
.height(100)
.backgroundColor(Color.Pink)
}

@Entry
@Component
struct FancyUse {
@State heightValue: number = 100
// 定义在组件内的@Styles封装的样式
@Styles fancy() {
.width(200)
.height(this.heightValue)
.backgroundColor(Color.Yellow)
.onClick(() => {
this.heightValue = 200
})
}

build() {
Column({ space: 10 }) {
// 使用全局的@Styles封装的样式
Text(‘FancyA’)
.globalFancy()
.fontSize(30)

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数HarmonyOS鸿蒙开发工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年HarmonyOS鸿蒙开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。