鸿蒙 ArkTS 样式复用：@Styles 装饰器从入门到实战

前言在鸿蒙 ArkTS 开发中UI 样式代码重复是非常常见的问题。多个按钮、文本、布局使用相同的宽高、圆角、间距时如果逐个编写会产生大量冗余代码不利于后期维护。 本文核心为此ArkTS 提供了Styles装饰器专门用于通用样式的抽取与复用。本文带你彻底掌握Styles的用法、规则与实战场景。一、Styles 是什么Styles用于将一组通用样式封装成一个方法在需要的组件上直接调用实现一处定义、多处复用。它支持封装通用属性如 width、height、borderRadius 等和通用事件但不支持参数、不支持组件专有属性。二、Styles 核心使用规则支持组件内定义和全局定义两种方式。组件内定义不需要 function 关键字全局定义必须加 function。只能包含通用属性和通用事件不能使用组件专属 API。不支持传参。全局Styles仅在当前.ets文件内有效。三、组件内 Styles当前组件独享在组件内部定义的Styles只能在当前组件内部使用安全性更高。EntryComponentstruct StylesPage{build(){Column(){Row({space:50}){Button(确认).type(ButtonType.Normal).backgroundColor(Color.Green).compButtonStyle().onClick(()console.log(确认))Button(取消).type(ButtonType.Normal).backgroundColor(Color.Gray).compButtonStyle().onClick(()console.log(取消))}}.width(100%).height(100%).justifyContent(FlexAlign.Center)}// 组件内样式定义StylescompButtonStyle(){.width(100).height(40).borderRadius(10)}}四、全局 Styles当前文件通用定义在组件外部当前.ets文件内所有组件均可调用。EntryComponentstruct StylesPage{build(){Column(){Row({space:50}){Button(确认).type(ButtonType.Normal).backgroundColor(Color.Green).globalButtonStyle().onClick(()console.log(确认))Button(取消).type(ButtonType.Normal).backgroundColor(Color.Gray).globalButtonStyle().onClick(()console.log(取消))}}.width(100%).height(100%).justifyContent(FlexAlign.Center)}}// 全局样式定义StylesfunctionglobalButtonStyle(){.width(100).height(40).borderRadius(10)}五、总结Styles是鸿蒙样式复用最基础、最常用的方案适合抽取无差异、通用、无需传参的样式。但它也有明显局限不支持传参、不能使用组件专有属性与事件。 不过 Styles 也有一定局限不支持传参、不能使用组件专有属性与事件。如果想要更强大、更灵活的样式复用能力比如动态传入颜色、封装点击事件、为特定组件定制专属样式记得关注我的下一篇文章将会带来比 Styles 更进阶、功能更强的 Extend 装饰器咱们下篇不见不散