【鸿蒙HarmonyOS开发笔记】组件编程技巧之样式复用

样式复用

概述

当多个组件具有相同的样式时，若每个组件都单独设置，将会有大量的重复代码。为避免重复代码，开发者可使用@Styles或者@Extend装饰器将多条样式设置提炼成一个方法，然后直接在各组件声明的位置进行调用，这样就能完成样式的复用。

`@Styles`方法

@Styles方法可定义在组件内或者全局，具体语法如下

● 组件内

@Entry
@Component
struct StylesPage {build() {Column() {Row({ space: 50 }) {Button('确认').type(ButtonType.Normal).backgroundColor(Color.Green).compButtonStyle() //复用样式.onClick(() => console.log('确认'))Button('取消').type(ButtonType.Normal).backgroundColor(Color.Gray).compButtonStyle() //复用样式.onClick(() => console.log('取消'))}}.width('100%').height('100%').justifyContent(FlexAlign.Center)}//组件内样式定义@Styles compButtonStyle() {.width(100).height(40).borderRadius(10)}
}

● 全局

@Entry
@Component
struct StylesPage {build() {Column() {Row({ space: 50 }) {Button('确认').type(ButtonType.Normal).backgroundColor(Color.Green).globalButtonStyle() //复用样式.onClick(() => console.log('确认'))Button('取消').type(ButtonType.Normal).backgroundColor(Color.Gray).globalButtonStyle() //复用样式.onClick(() => console.log('取消'))}}.width('100%').height('100%').justifyContent(FlexAlign.Center)}
}//全局样式定义
@Styles function globalButtonStyle() {.width(100).height(40).borderRadius(10)
}

注意

组件内的@Styles方法只能在当前组件中使用，全局的@Styles方法目前只允许在当前的.ets文件中使用
组件内定义@Styles方法时不需要使用function关键字，全局的@Styles方法需要使用function关键字
@Styles方法中只能包含通用属性方法和通用事件方法
@Styles方法不支持参数

`@Extend`方法

@Extend装饰的方法同样可用于组件样式的复用，与@Styles不同的是，@Extend方法只能定义在全局。并且@Extend方法只能用于指定类型的组件，例如以下方法只能用于Button组件（可以理解为是Button组件的扩展样式）

@Extend(Button) function buttonStyle(){...
}

由于@Extend方法只能用于指定类型的组件，因此方法中可包含指定组件的专有属性方法和专有事件方法。另外，@Extend方法还支持参数，具体语法如下

@Entry
@Component
struct ExtendPage {build() {Column() {Row({ space: 50 }) {Button('确认').buttonExtendStyle(Color.Green, () => console.log('确认')) //复用样式Button('取消').buttonExtendStyle(Color.Gray, () => console.log('取消')) //复用样式}}.width('100%').height('100%').justifyContent(FlexAlign.Center)}
}//样式定义
@Extend(Button) function buttonExtendStyle(color: Color, callback: () => void) {.width(100).height(40).borderRadius(10).type(ButtonType.Normal).backgroundColor(color).onClick(callback)
}