鸿蒙Next开发日记 Day08 - 组件属性复用

开发鸿蒙页面时，经常会遇到不同的组件需要应用相同的样式，这种情况该如何复用样式呢？

我们拿一个Image组件为例

我想设置统一设置样式为高度10vp，宽度10vp，填充模式为Cover，右间距为30vp，在加入点击缩放效果。

首先先定义复用样式方法。

@Extend(Image)
function controlRightImageStyle() {
  .height("10vp")
  .width("10vp")
  .objectFit(ImageFit.Cover)
  .margin({ left: "30vp" })
  .clickEffect({
    scale: 0.5,
    level: ClickEffectLevel.LIGHT
  })
}

这里需要@Extand注解，说明这个样式是给Image组件使用的。

然后在需要使用此样式的组件上，添加：

Image($r('app.media.ic_player_fast_rewind'))
  .controlLeftImageStyle()

如果你想要复用样式，然后对里面的某些属性进行单独修改，可以

Image($r('app.media.ic_player_fast_rewind'))
  .controlLeftImageStyle()
  .height("50vp")
  .width("50vp")