【HarmonyOS 4.0】组件样式复用

1. 当多个组件具有相同的样式时，为避免重复代码，开发者可使用 @Styles、@Extend() 装饰器将多条样式设置提炼成一个方法，直接在各组件声明的位置进行调用，这样可完成样式的复用。

1. @Styles

1. 组件内的 @Styles 方法只能在当前组件中使用，全局的 @Styles 方法目前只允许在当前的 .ets 文件中使用。
2. 组件内定义 @Styles 方法时不需要 function 关键字，全局的 @Styles 方法需要使用 function 关键字。
3. @Styles 方法中只能包含通用属性方法(width、height、borderRadius)和通用事件方法
4. @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

1. @Extend 装饰的方法只能定义在全局，使用范围目前只限于当前的 .ets 文件。
2. @Extend 方法只能用于指定类型的组件，可以理解为是某组件的扩展样式。
3. 因此 @Extend 方法中可包含指定组件的专有属性方法和专有事件方法。
4. @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)
	}
}