HarmonyOS鸿蒙学习笔记（19）@Extend 标签的使用

@Extend标签的作用就是可以扩展组件,定义扩展组件样式，比如有如下布局：

其中短信验证码登录和忘记密码是两个Text，可以观察出两个Text的文字大小、文字颜色等属性都一样，那么我们就可以使用@Extend将这些共有的属性都提取出来，代码如下：

//扩展Text
@Extend(Text)
function blueTextStyle() {
  .fontColor($r('app.color.login_blue_text_color'))
  .fontSize($r('app.float.small_text_size'))
  .fontWeight(FontWeight.Medium)
  .margin({
    left: $r('app.float.forgot_margin'),
    right: $r('app.float.forgot_margin')
  })
}

布局文件如下：

     Row() {
        Text($r('app.string.message_login')).blueTextStyle()
        Text($r('app.string.forgot_password')).blueTextStyle()
      }
      .justifyContent(FlexAlign.SpaceBetween)
      .width(CommonConstants.FULL_PARENT)
      .margin({ top: $r('app.float.forgot_margin_top') })

参考资料：
@Extend 官方文档