- 当多个组件具有相同的样式时,为避免重复代码,开发者可使用 @Styles、@Extend() 装饰器将多条样式设置提炼成一个方法,直接在各组件声明的位置进行调用,这样可完成样式的复用。
1. @Styles
- 组件内的 @Styles 方法只能在当前组件中使用,全局的 @Styles 方法目前只允许在当前的 .ets 文件中使用。
- 组件内定义 @Styles 方法时不需要 function 关键字,全局的 @Styles 方法需要使用 function 关键字。
- @Styles 方法中只能包含
通用属性方法
(width、height、borderRadius)和通用事件方法
- @Styles 方法不支持参数。
1.1 组件内定义样式
@Entry
@Component
struct Login {
build(){
Column() {
TextInput()
.inputStyle()
TextInput()
.inputStyle()
}
}
@Styles inputStyle(){
.placeholderColor($r('app.color.placeholder_color'))
.height($r('app.float.login_input_height'))
.fontSize($r('app.float.text_input_size'))
.backgroundColor($r('app.color.text_input_background'))
.width(CommonConstants.FULL_PARENT)
.padding({
left: CommonConstants.INPUT_PADDING_LEFT
})
.margin({ top: $r('app.float.input_margin_top') })
}
}
1.2 全局定义样式,敲 styles 回车生成代码模版
@Styles function inputStyle(){
.placeholderColor($r('app.color.placeholder_color'))
.height($r('app.float.login_input_height'))
.fontSize($r('app.float.text_input_size'))
.backgroundColor($r('app.color.text_input_background'))
.width(CommonConstants.FULL_PARENT)
.padding({
left: CommonConstants.INPUT_PADDING_LEFT
})
.margin({ top: $r('app.float.input_margin_top') })
}
@Entry
@Component
struct Login {
build(){
Column() {
TextInput()
.inputStyle()
TextInput()
.inputStyle()
}
}
}
2. @Extend
- @Extend 装饰的方法只能定义在全局,使用范围目前只限于当前的 .ets 文件。
- @Extend 方法只能用于指定类型的组件,可以理解为是某组件的扩展样式。
- 因此 @Extend 方法中可包含指定组件的
专有属性方法
和专有事件方法
。- @Extend 方法支持参数。
2.1 敲 exted 回车生成代码模版
@Extend(Button)
function buttonStyle(color: Color) {
.width(CommonConstants.FULL_PARENT)
.height($r('app.float.line_height'))
.type(ButtonType.Normal)
.backgroundColor(color)
}
build() {
Column() {
Button('确定')
.buttonStyle(Color.Green)
Button('取消')
.buttonStyle(Color.Gray)
}
}