HarmonyOS开发者社区

@Styles是鸿蒙ArkUI中用于样式复用的装饰器，可以将一组样式属性封装成一个可重用的样式方法。与直接内联样式或通过函数返回样式对象不同，@Styles方法内部可以调用组件的链式样式API，并且支持访问组件的@State变量，实现动态样式。@Styles分为全局样式（定义在组件外部，所有组件可用）和局部样式（定义在组件内部，可访问组件状态）。使用@Styles时需要注意：第一，@Styles方法不能有参数（如需参数化样式，可使用@Extend）；第二，@Styles方法内不能使用this访问组件实例，局部样式除外；第三，@Styles不能用于自定义组件的样式扩展，只能用于系统组件。对于需要根据状态变化的样式，可以在@Styles方法内部直接读取@State变量，样式会自动随状态变化而更新。@Styles是构建组件库和主题系统的基础工具。

// 全局样式：定义通用圆角卡片样式
@Styles
function cardStyle() {
.borderRadius(12)
.backgroundColor(Color.White)
.padding(16)
.shadow({ radius: 8, color: '#1A000000', offsetX: 0, offsetY: 2 })
}

// 局部样式：可访问组件内部状态
@Entry
@Component
struct ThemedCard {
@State isPressed: boolean = false;

@Styles
pressedStyle() {
.scale(this.isPressed ? 0.98 : 1)
.backgroundColor(this.isPressed ? '#F0F0F0' : Color.White)
}

build() {
Column() {
Text('可交互卡片').fontSize(18).fontWeight(FontWeight.Medium)
Text('点击或长按体验按压效果').fontSize(14).fontColor('#666').margin({ top: 8 })
}
.cardStyle() // 使用全局样式
.pressedStyle() // 使用局部样式
.onTouch((event: TouchEvent) => {
if (event.type === TouchType.Down) this.isPressed = true;
if (event.type === TouchType.Up) this.isPressed = false;
})
}
}