ArkTs 语法学习 ---- 样式相关

Styles说明装饰器参数无功能可以提炼公共样式进行复用修饰对象没有参数的函数属性/事件支持仅支持通用属性和通用事件。定义可以定义在组件内或全局，在全局定义时需在方法名前面添加function关键字，组件内定义时则不需要添加function关键字。变量引用定义在组件内的@Styles可以通过this访问组件的常量和状态变量，并可以在@Styles里通过事件来改变状态变量的值优先级组件内@Styl

北风江畔

838人浏览 · 2024-03-21 11:51:01

北风江畔 · 2024-03-21 11:51:01 发布

一、样式相关

@Styles
@Extend
stateStyles

1 @Styles 定义组件重用样式

@Styles	说明
装饰器参数	无
功能	可以提炼公共样式进行复用
修饰对象	没有参数的函数
属性/事件支持	仅支持通用属性和通用事件。
定义	可以定义在组件内或全局，在全局定义时需在方法名前面添加function关键字，组件内定义时则不需要添加function关键字。
变量引用	定义在组件内的@Styles可以通过this访问组件的常量和状态变量，并可以在@Styles里通过事件来改变状态变量的值
优先级	组件内@Styles的优先级高于全局@Styles

2@Extend 定义扩展组件样式

@Extend	说明
装饰器参数	无
功能	用于扩展原生组件样式。
修饰对象	函数
属性/事件支持	支持通用属性和通用事件。支持封装指定的组件的私有属性和私有事件和预定义相同组件的@Extend的方法。
定义	仅支持定义在全局
参数传递	可以在调用时传递参数，调用遵循TS方法传值调用。方法的参数可以为function，作为Event事件的句柄。参数可以为状态变量，当状态变量改变时，UI可以正常的被刷新渲染

3@Styles 和 @Extend 区别

@Extend仅支持定义在全局，@Styles支持在组件内部定义，全局定义。
@Styles不支持带参数的函数，@Extend 支持
@Extend支持封装指定的组件的私有属性和私有事件和预定义相同组件的@Extend的方法。 @Styles仅支持通用属性和通用事件。

4stateStyles 多态样式

@Styles和@Extend仅仅应用于静态页面的样式复用
stateStyles可以依据组件的内部状态的不同，快速设置不同样式

stateStyles	说明
stateStyles	属性方法
状态	focused：获焦态。 normal：正常态。 pressed：按压态。 disabled：不可用态。
变量使用	可以通过this绑定组件内的常规变量和状态变量。