本文主要是介绍【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)}
}
这篇关于【HarmonyOS 4.0】组件样式复用的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!