devbox
2023面试高手
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

HarmonyOS应用开发-ArkTS语言的@Styles与@Extend_harmony arkts 从外部文件导入@styles

作者：2023面试高手 | 2024-03-26 22:14:55

赞

踩

harmony arkts 从外部文件导入@styles

前言

本次内容就是 Style 和 Extend 的介绍和玩法以及场景,然后后面用一个水果面板案例来巩固一下.很简单,但是内容多慢慢消化!!

style 用于将重复的样式给他提出来形成公共的样式,

extend 用于将原生也就是系统的组件样式扩展

Styles 装饰器

@Styles装饰器可以将多条样式设置提炼成一个方法，直接在组件声明的位置调用。通过@Styles装饰器可以快速定义并复用自定义样式。用于快速定义并复用自定义样式

⚠️ : 该装饰器支持在ArkTS卡片中使用

Styles 支持在组件当中定义或者全局定义,全局定义的时候需要 function 关键字 ，组件内定义时则不需要添加function关键字。

语法: Styles xxxx () {....}

  1. @Entry
  2. @Component
  3. struct StyleStudy {
  4.   @State message: string = 'Hello World'
  5.  
  6.   // 组件内
  7.   @Styles style_1() {
  8.     .width(120)
  9.     .height(120)
  10.     .backgroundColor("red")
  11.   }
  12.  
  13.   build() {
  14.     Row() {
  15.       Column() {
  16.         Text("halo")
  17.           .style_1().fontSize(50)
  18.       }
  19.       .width('100%')
  20.     }
  21.     .height('100%')
  22.   }
  23. }

img

  • 全局样式,和组内一样的用

img

  • @Styles方法不支持参数
  1. @Styles function globalFancy (value: number) {
  2.   .width(value)
  3. }

img

  • 组件内的@Styles可以通过this访问组件的常量和状态变量，并可以在@Styles里通过事件来改变状态变量的值

img

  • 组件内@Styles的优先级高于全局@Styles,框架优先找当前组件内的@Styles，如果找不到，则会全局查找, 可以看到我们取一个一样的名称的样式表默认找最近的

img

使用代码 demo

演示了组内的样式和全局的样式使用方法

  1. // @Styles不支持参数
  2. // @Styles function globalFancy(value: number) {
  3. //   .width(value)
  4. // }
  5.  
  6. // 定义在全局的@Styles封装的样式
  7. @Styles function globalFancy  () {
  8.     .width(150)
  9.     .height(100)
  10.     .backgroundColor(Color.Pink)
  11. }
  12.  
  13. @Entry
  14. @Component
  15. struct StyleStudy {
  16.     @State message: string = 'Hello World'
  17.  
  18.     // 组件内
  19.     @Styles style_1() {
  20.         .height(120)
  21.         .backgroundColor("red")
  22.     }
  23.  
  24.     build() {
  25.         Row() {
  26.             Column() {
  27.                 Text("halo我是父组件")
  28.                 .style_1().fontSize(30)
  29.  
  30.                 // 看看 组件内的@Styles可以通过this访问组件的常量和状态变量，
  31.                 // 并可以在@Styles里通过事件来改变状态变量的值
  32.                 FancyUse()
  33.  
  34.             }
  35.             .width('100%')
  36.         }
  37.         .height('100%')
  38.     }
  39. }
  40.  
  41. @Component
  42. struct FancyUse {
  43.     @State heightValue: number = 100
  44.  
  45.     @Styles fancy() {
  46.         // 传递动态参数
  47.         .height(this.heightValue)
  48.         .backgroundColor(Color.Yellow)
  49.         .onClick(() => {
  50.             this.heightValue = 200
  51.         })
  52.     }
  53.  
  54.     build() {
  55.         Column({ space: 10 }) {
  56.             // 使用全局的@Styles封装的样式
  57.             Text('儿子-1')
  58.             .globalFancy ()
  59.             .fontSize(30)
  60.  
  61.             // 使用组件内的@Styles封装的样式
  62.             Text('儿子-2')
  63.             .fancy()
  64.             .fontSize(30)
  65.         }
  66.     }
  67. }

Extend 装饰器

上面我们是可以把样式整合到一个函数当中,Extend 的作用就是在原有的组件上面继续添加

语法:

@Extend(组件的名称) function functionName { ... }

使用规则
  • @Extend只支持定义在全局,不能在局部玩,直接无法识别报错

img

  • @Extend支持封装指定的组件的私有属性和私有事件和预定义相同组件的@Extend的方法
  • 可以继续在扩展的外面追加样式
  • 可以在调用时传递参数，调用遵循TS方法传值调用

img

  • @Extend装饰的方法的参数可以为function，作为Event事件的句柄
  • 只能说有点像 Java 里面的 Super

语法:

  1. @Extend(组件) function 名称(onClick: () => void) {
  2.  .onClick(onClick)
  3. }

img

  1. // Event事件
  2. @Extend(Text) function makeMeClickEs2(onClick: () => void) {
  3.   .backgroundColor(Color.Pink)
  4.   .onClick(onClick)
  5. }
  6.  
  7. @Entry
  8. @Component
  9. struct FancyUseEs2 {
  10.   @State label: string = 'Hello World';
  11.  
  12.   // 执行操作
  13.   onClickHandler() {
  14.     this.label = 'Hello ArkUI';
  15.     console.log("我被点击触发了");
  16.   }
  17.  
  18.   build() {
  19.     Row({ space: 10 }) {
  20.       // 动态参数
  21.       Text(`${this.label}`).fontSize(35)
  22.         // 绑定事件
  23.         .makeMeClickEs2(this.onClickHandler.bind(this))
  24.  
  25.     }.height("100%").width(100)
  26.   }
  27. }

上面代码作用就是在FancyUseEs2 组件当中绑定了makeMeClickEs2 的事件并且传递了 this 指针,makeMeClickEs2 事件里面直接进行了触发修改了文字信息.

  • @Extend的参数可以为状态变量(相当于 vue 里面的双向绑定)，当状态变量改变时，UI可以正常的被刷新渲染,但是好像不能在扩展里面更改这个值.

img

案例

我们利用前面学到的东西搞个小案例需求如下

一个头部标题

下面就是一个列表,列表里面可以显示任何东西,要把重复的样式提取出来放在 styles 当中

img

首先我们声明一个类用来表示为水果,里面有 id、名称、序号

  1. // 水果类
  2. class Fruit {
  3.   static id: number = 1
  4.  
  5.   // 名称
  6.   name: string = ""
  7.   // 水果的序号
  8.   no: string = `${Fruit.id++}`
  9.  
  10.   // 利用构造器让外面传递
  11.   constructor(name: string) {
  12.     this.name = name
  13.   }
  14. }

在入口组件当中定义集合存储里面定义了一行标题,

  1. @Entry
  2. @Component
  3. struct Demo {
  4.  
  5.   
  6.   build() {
  7.     // 内部严元素间距 10
  8.     Column({ space: 10 }) {
  9.   
  10.       Row() {
  11.         Text('水果专柜
    声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/2023面试高手/article/detail/320012?site
    推荐阅读
    相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。