HarmonyOS鸿蒙学习笔记(19)@Extend 标签的使用

发布时间:2024年01月22日

@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 官方文档

文章来源:https://blog.csdn.net/chunqiuwei/article/details/135749901
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。