软件教程 2025年08月6日
0 收藏 0 点赞 922 浏览 1770 个字
摘要 :

文章目录 @Styles @Extend:定义扩展组件样式 本文主要讲解关于HarmonyOS开发中@Styles和@Extend的区别关内容,让我们来一起学习下吧! 如果每个组件的样式都需要单独……




  • @Styles
  • @Extend:定义扩展组件样式

本文主要讲解关于HarmonyOS开发中@Styles和@Extend的区别关内容,让我们来一起学习下吧!

如果每个组件的样式都需要单独设置,在开发过程中会出现大量代码在进行重复样式设置,虽然可以复制粘贴,但为了代码简洁性和后续方便维护,我们推出了可以提炼公共样式进行复用的装饰器@Styles。
@Styles装饰器可以将多条样式设置提炼成一个方法,直接在组件声明的位置调用。通过@Styles装饰器可以快速定义并复用自定义样式。用于快速定义并复用自定义样式。

@Styles

  1. 仅支持通用属性和通用事件,如样式width,heigth
  2. 不支持参数
  3. 可以定义在全局,加function。可以定义在局部,不加function,定义在局部时可以用this访问组件变量

示例代码

// 定义在全局的@Styles封装的样式
@Styles function globalFancy  () {
  .width(150)
  .height(100)
  .backgroundColor(Color.Pink)
}

@Entry
@Component
struct FancyUse {
  @State heightValue: number = 100
  // 定义在组件内的@Styles封装的样式
  @Styles fancy() {
    .width(200)
    .height(this.heightValue)
    .backgroundColor(Color.Yellow)
    .onClick(() => {
      this.heightValue = 200
    })
  }

  build() {
    Column({ space: 10 }) {
      // 使用全局的@Styles封装的样式
      Text(\'FancyA\')
        .globalFancy ()
        .fontSize(30)
      // 使用组件内的@Styles封装的样式
      Text(\'FancyB\')
        .fancy()
        .fontSize(30)
    }
  }
}

@Extend:定义扩展组件样式

  1. 只支持定义在全局,不可以定义在局部
  2. 支持封装指定组件的私有属性和私有事件和预定义相同组件的@Extend方法
  3. 支持参数包括普通变量,状态变量,函数

示例代码

@Entry
@Component
struct FancyUse {
  @State label: string = \'Hello World\'

  build() {
    Row({ space: 10 }) {
      Text(`${this.label}`)
        .fontStyle(FontStyle.Italic)
        .fontWeight(100)
        .backgroundColor(Color.Blue)
      Text(`${this.label}`)
        .fontStyle(FontStyle.Italic)
        .fontWeight(200)
        .backgroundColor(Color.Pink)
      Text(`${this.label}`)
        .fontStyle(FontStyle.Italic)
        .fontWeight(300)
        .backgroundColor(Color.Orange)
    }.margin(\'20%\')
  }
}

将共同样式提取复用

@Extend(Text) function fancyText(weightValue: number, color: Color) {
  .fontStyle(FontStyle.Italic)
  .fontWeight(weightValue)
  .backgroundColor(color)
}
@Entry
@Component
struct FancyUse {
  @State label: string = \'Hello World\'

  build() {
    Row({ space: 10 }) {
      Text(`${this.label}`)
        .fancyText(100, Color.Blue)
      Text(`${this.label}`)
        .fancyText(200, Color.Pink)
      Text(`${this.label}`)
        .fancyText(300, Color.Orange)
    }.margin(\'20%\')
  }
}

以上就是关于HarmonyOS开发中@Styles和@Extend的区别相关的全部内容,希望对你有帮助。欢迎持续关注潘子夜个人博客(www.panziye.com),学习愉快哦!

微信扫一扫

支付宝扫一扫

版权: 转载请注明出处:https://www.zuozi.net/6631.html

管理员

相关推荐
2025-08-06

文章目录 一、Promise基础回顾 二、Promise 与 axios 结合使用场景及方法 (一)直接返回 axios …

269
2025-08-06

文章目录 一、模块初始化时的内部机制 二、常见导出写法的差异分析 (一)写法一:module.exports…

107
2025-08-06

文章目录 一、ResizeObserver详解 (一)ResizeObserver是什么 (二)ResizeObserver的基本用法 …

683
2025-08-06

文章目录 一、前期准备工作 (一)下载相关文件 (二)安装必要工具 二、处理扣子空间生成的文件…

338
2025-08-06

文章目录 一、官方文档 二、自动解包的数据类型 ref对象:无需.value即可访问 reactive对象:保持…

371
2025-08-06

文章目录 一、Hooks的工作原理 二、在if语句中使用Hook会出什么岔子? 三、React官方的Hook使用规…

843
发表评论
暂无评论

还没有评论呢,快来抢沙发~

助力内容变现

将您的收入提升到一个新的水平

点击联系客服

在线时间:08:00-23:00

客服QQ

122325244

客服电话

400-888-8888

客服邮箱

122325244@qq.com

扫描二维码

关注微信客服号