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

HarmonyOS系统开发ArkTS常用组件编程技巧_组件内的styles方法只能在当前

作者：小蓝xlanll | 2024-06-13 19:56:42

赞

踩

组件内的styles方法只能在当前

目录

样式复用

@Styles方法

@Extend方法

        组件编程在使用过程中有很多技巧，在这里分享样式复用技巧和UI结构复用技巧。

样式复用

我们观察下面的代码，在代码中很多重复行的代码，如：

    Image 的  .width(30).height(30) 是重复的
    Button的  .fontSize(25).width(150).height(65).backgroundColor(Color.Green)是重复的
    Text  的  .fontSize(20).fontColor(Color.White).fontWeight(500) 是重复的

  1. @Entry
  2. @Component
  3. struct customStyle {
  4.   @State isOn: boolean = false;
  5.   @State isDel: boolean = false;
  6.  
  7.   build() {
  8.     Column({ space: 10 }) {
  9.       Button({ type: ButtonType.Capsule, stateEffect: true }) {
  10.         Row({ space: 10 }) {
  11.           Image($r('app.media.icon_new_folder'))
  12.             .width(30)
  13.             .height(30)
  14.           Text('新建文件')
  15.             .fontSize(20)
  16.             .fontColor(Color.White)
  17.             .fontWeight(500)
  18.         }
  19.       }
  20.       .fontSize(25)
  21.       .width(150)
  22.       .height(65)
  23.       .backgroundColor(Color.Green)
  24.       .onClick(() => {
  25.         console.log('我准备开始建立文件夹');
  26.       })
  27.  
  28.       Button({ type: ButtonType.Capsule, stateEffect: true }) {
  29.         Row({ space: 10 }) {
  30.           Image($r('app.media.icon_new_folder'))
  31.             .width(30)
  32.             .height(30)
  33.           Text('新建文件')
  34.             .fontSize(20)
  35.             .fontColor(Color.White)
  36.             .fontWeight(500)
  37.         }
  38.       }
  39.       .fontSize(25)
  40.       .width(150)
  41.       .height(65)
  42.       .backgroundColor(Color.Green)
  43.       .onClick(() => {
  44.         console.log('我准备开始建立文件夹');
  45.       })
  46.     }
  47.     .width('100%')
  48.     .height("100%")
  49.     .justifyContent(FlexAlign.Center)
  50.  
  51.   }
  52. }
  53.  
  54.  
  55. @Extend(Image) function consumeImgStyle() {
  56.   .width(30)
  57.   .height(30)
  58. }
  59.  
  60. @Extend(Button) function consumeButtonStyle() {
  61.   .fontSize(25)
  62.   .width(150)
  63.   .height(65)
  64. }
  65.  
  66. @Extend(Text) function consumeBTextStyle() {
  67.   .fontSize(20)
  68.   .fontColor(Color.White)
  69.   .fontWeight(500)
  70. }

        当多个组件具有相同的样式时，若每个组件都单独设置，将会有大量的重复代码。为避免重复代码，开发者可使用@Styles或者@Extend装饰器将多条样式设置提炼成一个方法，然后直接在各组件声明的位置进行调用，这样就能完成样式的复用。

@Styles方法

      @Styles方法可定义在组件内或者全局。

  • 1. 组件内定义的@Styles方法只能在当前组件中使用，全局的@Styles方法目前只允许在当前的.ets文件中使用
  • 2. 组件内定义@Styles方法时不需要使用function关键字，全局的@Styles方法需要使用function关键字
  • 3. @Styles方法中只能包含通用属性方法和通用事件方法，例如在上面的代码中 fontSize(20).fontColor(Color.White).fontWeight(500)也是重复的，但这不是通用属性。可以定义的只能是通用属性。
  • 4. @Styles方法不支持参数
  • 5. @Styles方法可以用在任意类型的组件上。注意下面的@Extend则是使用在定制化组件上。

       将上面重复的样式代码分别提取到各自定义的@Style方法中，直接使用@Style方法
定义格式如下。 

  1. @Styles定义在Struct结构体内部
  2. ===============================================================================
  3.   @Styles consumeImgStyle(){
  4.     .width(30)
  5.     .height(30)
  6.   }
  7.  
  8.   @Styles consumeButtonStyle(){
  9.     .width(150)
  10.     .height(65)
  11.     .backgroundColor(Color.Green)
  12.   }
  13.  
  14. @Styles定义在同一个ets文件中的Struct结构体外部，必须加上 function 关键字
  15. ===============================================================================
  16.  
  17. @Styles function globalConsumeImgStyle() {
  18.   .width(30)
  19.   .height(30)
  20. }
  21.  
  22. @Styles function globalConsumeButtonStyle() {
  23.   .width(150)
  24.   .height(65)
  25.   .backgroundColor(Color.Green)
  26. }

        将重复样式代码提取之后，直接使用提取后的方法，使用@Styles方法之后代码。

  1. @Entry
  2. @Component
  3. struct customStyle {
  4.   @State isOn: boolean = false;
  5.   @State isDel: boolean = false;
  6.  
  7.   build() {
  8.     Column({ space: 10 }) {
  9.       Button({ type: ButtonType.Capsule, stateEffect: true }) {
  10.         Row({ space: 10 }) {
  11.           Image($r('app.media.icon_delete'))
  12.             .consumeImgStyle()
  13.           Text('删除文件')
  14.             .fontSize(20)
  15.             .fontColor(Color.White)
  16.             .fontWeight(500)
  17.         }
  18.       }
  19.       .fontSize(25)
  20.       .width(150)
  21.       .height(65)
  22.  
  23.       Button({ type: ButtonType.Capsule, stateEffect: true }) {
  24.         Row({ space: 10 }) {
  25.           Image($r('app.media.icon_new_folder'))
  26.             .consumeImgStyle()
  27.           Text('新建文件')
  28.             .fontSize(20)
  29.             .fontColor(Color.White)
  30.             .fontWeight(500)
  31.         }
  32.       }
  33.       .consumeButtonStyle()
  34.       .fontSize(25)
  35.       .onClick(() => {
  36.         console.log('我准备开始建立文件夹');
  37.       })
  38.     }
  39.     .width('100%')
  40.     .height("100%")
  41.     .justifyContent(FlexAlign.Center)
  42.  
  43.   }
  44.  
  45.   @Styles consumeImgStyle(){
  46.     .width(30)
  47.     .height(30)
  48.   }
  49.  
  50.   @Styles consumeButtonStyle(){
  51.     .width(150)
  52.     .height(65)
  53.     .backgroundColor(Color.Green)
  54.   }
  55. }
  56.  
  57. 定义全局使用的@Styles方法需要加 function
  58. ======================================================
  59. @Styles function globalConsumeImgStyle() {
  60.   .width(30)
  61.   .height(30)
  62. }
  63.  
  64. @Styles function globalConsumeButtonStyle() {
  65.   .width(150)
  66.   .height(65)
  67.   .backgroundColor(Color.Green)
  68. }

@Extend方法

     @Extend装饰的方法同样可用于组件样式的复用，与@Styles不同的是：

  • @Extend方法只能定义在全局，使用范围目前只限于当前的.ets文件
  • @Extend方法只能用于指定类型的组件，如Button组件
  • @Extend方法可包含指定组件的专有属性方法和专有事件方法。
  • @Extend方法支持参数传递

       重复的代码

        Image 的  .width(30).height(30) 是重复的
        Button的  .fontSize(25).width(150).height(65) .backgroundColor(Color.Green)是重复的
        Text  的  .fontSize(20).fontColor(Color.White).fontWeight(500)是重复的

        将上面重复的样式代码分别提取到各自定义的@Extend方法中，直接使用@Extend方法
定义格式如下。

  1. @Extend(Image) function consumeImgStyle() {
  2.   .width(30)
  3.   .height(30)
  4. }
  5.  
  6. @Extend(Button) function consumeButtonStyle(color: Color) {
  7.   .fontSize(25)
  8.   .width(150)
  9.   .height(65)
  10.   .backgroundColor(color)
  11.  
  12. }
  13.  
  14. @Extend(Text) function consumeTextStyle(color: Color, size: number, weight: number) {
  15.   .fontSize(size)
  16.   .fontColor(color)
  17.   .fontWeight(weight)
  18. }

    将重复样式代码提取之后，直接使用提取后的方法，使用@Extend方法之后代码。

  1. @Entry
  2. @Component
  3. struct customStyle {
  4.   @State isOn: boolean = false;
  5.   @State isDel: boolean = false;
  6.  
  7.   build() {
  8.     Column({ space: 10 }) {
  9.       Button({ type: ButtonType.Capsule, stateEffect: true }) {
  10.         Row({ space: 10 }) {
  11.           Image($r('app.media.icon_new_folder'))
  12.             .consumeImgStyle()
  13.           Text('新建文件')
  14.             .consumeTextStyle(Color.White, 20, 500)
  15.         }
  16.       }
  17.       .consumeButtonStyle(Color.Green)
  18.       .onClick(() => {
  19.         console.log('我准备开始建立文件夹');
  20.       })
  21.  
  22.       Button({ type: ButtonType.Capsule, stateEffect: true }) {
  23.         Row({ space: 10 }) {
  24.           Image($r('app.media.icon_new_folder'))
  25.             .consumeImgStyle()
  26.           Text('新建文件')
  27.             .consumeTextStyle(Color.White, 20, 500)
  28.         }
  29.       }
  30.       .consumeButtonStyle(Color.Green)
  31.       .onClick(() => {
  32.         console.log('我准备开始建立文件夹');
  33.       })
  34.     }
  35.     .width('100%')
  36.     .height("100%")
  37.     .justifyContent(FlexAlign.Center)
  38.   }
  39. }
  40.  
  41.  
  42. @Extend(Image) function consumeImgStyle() {
  43.   .width(30)
  44.   .height(30)
  45. }
  46.  
  47. @Extend(Button) function consumeButtonStyle(color: Color) {
  48.   .fontSize(25)
  49.   .width(150)
  50.   .height(65)
  51.   .backgroundColor(color)
  52.  
  53. }
  54.  
  55. @Extend(Text) function consumeTextStyle(color: Color, size: number, weight: number) {
  56.   .fontSize(size)
  57.   .fontColor(color)
  58.   .fontWeight(weight)
  59. }

UI结构复用


       当页面有多个相同的UI结构时，若每个都单独声明，同样会有大量重复的代码。为避免重复代码，可以将相同的UI结构提炼为一个自定义组件，完成UI结构的复用。
       除此之外，ArkTS还提供了一种更轻量的UI结构复用机制@Builder方法，开发者可以将重复使用的UI元素抽象成一个@Builder方法，该方法可在build()方法中调用多次，以完成UI结构的复用。 

     @Builder装饰的方法同样可用于组件接结构的复用，

  • @Builder方法可以定义在组件内或者全局
  • @Builder方法定义的是组件内的@Builder方法，可通过this访问当前组件的属性和方法，而全局的@Builder方法则不能
  • @Builder方法定义的是组件内的@Builder方法只能用于当前组件，全局的@Builder方法导出（export）后，可用于整个应用。
  1. @Entry
  2. @Component
  3. struct BuilderUI {
  4.   @State isOn: boolean = false;
  5.   @State isDel: boolean = false;
  6.  
  7.   build() {
  8.     Column({ space: 10 }) {
  9.       this.builderButton($r('app.media.icon_delete'), '删除文件', () => {
  10.         console.log('我准备开始删除文件夹');
  11.       })
  12.       globalBuilderButton($r('app.media.icon_new_folder'), '新建文件', () => {
  13.         console.log('我准备开始建立文件夹');
  14.       })
  15.     }
  16.     .width('100%')
  17.     .height("100%")
  18.     .justifyContent(FlexAlign.Center)
  19.   }
  20.  
  21.   @Builder builderButton(icon: Resource, text: string, callback: () => void) {
  22.     Button({ type: ButtonType.Capsule, stateEffect: true }) {
  23.       Row({ space: 10 }) {
  24.         Image(icon)
  25.           .width(30)
  26.           .height(30)
  27.         Text(text)
  28.           .fontSize(20)
  29.           .fontColor(Color.White)
  30.           .fontWeight(500)
  31.           .backgroundColor(Color.Green)
  32.       }
  33.     }
  34.     .fontSize(25)
  35.     .width(150)
  36.     .height(65)
  37.     .onClick(callback)
  38.   }
  39. }
  40.  
  41. @Builder function globalBuilderButton(icon: Resource, text: string, callback: () => void) {
  42.   Button({ type: ButtonType.Capsule, stateEffect: true }) {
  43.     Row({ space: 10 }) {
  44.       Image(icon)
  45.         .width(30)
  46.         .height(30)
  47.       Text(text)
  48.         .fontSize(20)
  49.         .fontColor(Color.White)
  50.         .fontWeight(500)
  51.         .backgroundColor(Color.Green)
  52.     }
  53.   }
  54.   .fontSize(25)
  55.   .width(150)
  56.   .height(65)
  57.   .onClick(callback)
  58. }
  • @Builder方法支持参数传递规则，分为按值传递和按引用传递。带有花括号的{ } 为引用传递，其余为值传递。
  • 按引用传递时，若传递的参数为状态变量，则状态变量的变化将会触发@Builder方法内部UI的刷新，而按值传递时则不会。
  1. @Entry
  2. @Component
  3. struct BuilderUI {
  4.   @State status: number = 10;
  5.  
  6.   build() {
  7.     Column({ space: 10 }) {
  8.       valueText(this.status)
  9.       referenceText({status:this.status})
  10.  
  11.       Row({ space: 10 }) {
  12.         Button('值传递 - 1')
  13.           .consumeButtonStyle()
  14.           .onClick(() => {
  15.             this.status--
  16.           })
  17.         Button('引用传递 + 1')
  18.           .consumeButtonStyle()
  19.           .onClick(() => {
  20.             this.status++
  21.           })
  22.       }
  23.     }
  24.     .width('100%')
  25.     .height("100%")
  26.     .justifyContent(FlexAlign.Center)
  27.   }
  28.  
  29.  
  30. }
  31.  
  32. @Builder function valueText(count: number) {
  33.   Text(`进行值传递:  ${count}`).fontSize(30).fontWeight(600)
  34. }
  35.  
  36. @Builder function referenceText(count: {status:number}) {
  37.   Text(`进行引用传递: ${count.status}`).fontSize(30).fontWeight(600)
  38.   Text('引用参数传递的是状态变量status，这里内部UI会刷新')
  39. }
  40.  
  41. @Extend(Button) function consumeButtonStyle() {
  42.   .fontSize(20)
  43.   .width(140)
  44.   .height(65)
  45. }
  46.  
  47.

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小蓝xlanll/article/detail/714587
推荐阅读
相关标签

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

  

闽ICP备14008679号