当前位置:   article > 正文

HarmonyOS鸿蒙学习笔记(19)@Extend 标签的使用_鸿蒙 通用样式 extend放在不同文件

鸿蒙 通用样式 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')
  })
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

布局文件如下:

     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') })
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

参考资料
@Extend 官方文档

声明:本文内容由网友自发贡献,转载请注明出处:【wpsshop博客】
推荐阅读
相关标签
  

闽ICP备14008679号