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

样式相关

• @Styles
• @Extend
• stateStyles

@Styles 定义组件重用样式

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

@Extend 定义扩展组件样式

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

@Styles 和 @Extend 区别

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

stateStyles 多态样式

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

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