【HarmonyOS 4.0】组件样式复用

本文主要是介绍【HarmonyOS 4.0】组件样式复用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

当多个组件具有相同的样式时，为避免重复代码，开发者可使用 @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)}
}