HarmonyOS @style详细介绍

对于ArkTS中，@style这样的修饰器，写的函数没有返回值，这个有点不像是函数，更加偏向与拼接。

HarmonyOS

zbw_apple

2024-08-28 19:00:22

浏览

回答 1

待解决

回答 1

按赞同

按时间

Heiang

@style目前没办法export如果想复用

可以通过动态属性设置功能帮助解决样式复用的问题。动态属性设置允许您根据特定的条件或状态动态地更改组件的属性。

这种方法可以让您在一个地方定义样式规则，然后在不同的组件或页面中根据需要应用这些规则。

例如，您可以在一个通用的样式文件中定义一系列的样式规则，然后在一个中央控制器中根据不同的条件动态地应用这些规则。

这样，您就可以避免在每个页面中重复定义样式，同时也不需要过度封装简单的组件。

详细可以参考链接：

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-attribute-modifier-V5

使用@Styles装饰器，它可以将多条样式设置提炼成一个方法，直接在组件声明的位置调用。

通过@Styles装饰器可以快速定义并复用自定义样式。用于快速定义并复用自定义样式。

当前@Styles仅支持通用属性和通用事件，不支持参数。

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

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

如果想提取公共样式，可以使用attributeModifier

attributeModifier当前支持封装一个样式导出供其他组件使用，示例如下：

// CommonAttribute.ets

export class TitleTextAttribute implements AttributeModifier<TextAttribute> { 
 applyNormalAttribute(instance: TextAttribute): void { 
  instance.backgroundColor(Color.Black) 
  instance.fontColor(Color.White) 
  instance.fontSize(40) 
 } 
}

// Index.ets

import { TitleTextAttribute } from './CommonAttribute' 
 
@Entry 
@Component 
struct Index { 
 @State modifier: TitleTextAttribute = new TitleTextAttribute() 
 build() { 
  Row() { 
   Column() { 
    Text('Hello World') 
     .attributeModifier(this.modifier) 
   } 
   .width('100%') 
  } 
  .height('100%') 
 } 
}

2024-08-28 22:49:16

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS @style详细介绍

订阅鸿蒙技术特刊，精选内容抢先看