HarmonyOS系统开发ArkTS常用组件编程技巧

爱吃面的猫2024-03-25 21:01

目录

样式复用

@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) 是重复的
javascript 复制代码 
@Entry
@Component
struct customStyle {
  @State isOn: boolean = false;
  @State isDel: boolean = false;

  build() {
    Column({ space: 10 }) {
      Button({ type: ButtonType.Capsule, stateEffect: true }) {
        Row({ space: 10 }) {
          Image($r('app.media.icon_new_folder'))
            .width(30)
            .height(30)
          Text('新建文件')
            .fontSize(20)
            .fontColor(Color.White)
            .fontWeight(500)
        }
      }
      .fontSize(25)
      .width(150)
      .height(65)
      .backgroundColor(Color.Green)
      .onClick(() => {
        console.log('我准备开始建立文件夹');
      })

      Button({ type: ButtonType.Capsule, stateEffect: true }) {
        Row({ space: 10 }) {
          Image($r('app.media.icon_new_folder'))
            .width(30)
            .height(30)
          Text('新建文件')
            .fontSize(20)
            .fontColor(Color.White)
            .fontWeight(500)
        }
      }
      .fontSize(25)
      .width(150)
      .height(65)
      .backgroundColor(Color.Green)
      .onClick(() => {
        console.log('我准备开始建立文件夹');
      })
    }
    .width('100%')
    .height("100%")
    .justifyContent(FlexAlign.Center)

  }
}


@Extend(Image) function consumeImgStyle() {
  .width(30)
  .height(30)
}

@Extend(Button) function consumeButtonStyle() {
  .fontSize(25)
  .width(150)
  .height(65)
}

@Extend(Text) function consumeBTextStyle() {
  .fontSize(20)
  .fontColor(Color.White)
  .fontWeight(500)
}

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

@Styles方法

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

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

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

定义格式如下。

javascript 复制代码 
@Styles定义在Struct结构体内部
===============================================================================
  @Styles consumeImgStyle(){
    .width(30)
    .height(30)
  }

  @Styles consumeButtonStyle(){
    .width(150)
    .height(65)
    .backgroundColor(Color.Green)
  }

@Styles定义在同一个ets文件中的Struct结构体外部，必须加上 function 关键字
===============================================================================

@Styles function globalConsumeImgStyle() {
  .width(30)
  .height(30)
}

@Styles function globalConsumeButtonStyle() {
  .width(150)
  .height(65)
  .backgroundColor(Color.Green)
}

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

javascript 复制代码 
@Entry
@Component
struct customStyle {
  @State isOn: boolean = false;
  @State isDel: boolean = false;

  build() {
    Column({ space: 10 }) {
      Button({ type: ButtonType.Capsule, stateEffect: true }) {
        Row({ space: 10 }) {
          Image($r('app.media.icon_delete'))
            .consumeImgStyle()
          Text('删除文件')
            .fontSize(20)
            .fontColor(Color.White)
            .fontWeight(500)
        }
      }
      .fontSize(25)
      .width(150)
      .height(65)

      Button({ type: ButtonType.Capsule, stateEffect: true }) {
        Row({ space: 10 }) {
          Image($r('app.media.icon_new_folder'))
            .consumeImgStyle()
          Text('新建文件')
            .fontSize(20)
            .fontColor(Color.White)
            .fontWeight(500)
        }
      }
      .consumeButtonStyle()
      .fontSize(25)
      .onClick(() => {
        console.log('我准备开始建立文件夹');
      })
    }
    .width('100%')
    .height("100%")
    .justifyContent(FlexAlign.Center)

  }

  @Styles consumeImgStyle(){
    .width(30)
    .height(30)
  }

  @Styles consumeButtonStyle(){
    .width(150)
    .height(65)
    .backgroundColor(Color.Green)
  }
}

定义全局使用的@Styles方法需要加 function
======================================================
@Styles function globalConsumeImgStyle() {
  .width(30)
  .height(30)
}

@Styles function globalConsumeButtonStyle() {
  .width(150)
  .height(65)
  .backgroundColor(Color.Green)
}

@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方法

定义格式如下。

javascript 复制代码 
@Extend(Image) function consumeImgStyle() {
  .width(30)
  .height(30)
}

@Extend(Button) function consumeButtonStyle(color: Color) {
  .fontSize(25)
  .width(150)
  .height(65)
  .backgroundColor(color)

}

@Extend(Text) function consumeTextStyle(color: Color, size: number, weight: number) {
  .fontSize(size)
  .fontColor(color)
  .fontWeight(weight)
}

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

javascript 复制代码 
@Entry
@Component
struct customStyle {
  @State isOn: boolean = false;
  @State isDel: boolean = false;

  build() {
    Column({ space: 10 }) {
      Button({ type: ButtonType.Capsule, stateEffect: true }) {
        Row({ space: 10 }) {
          Image($r('app.media.icon_new_folder'))
            .consumeImgStyle()
          Text('新建文件')
            .consumeTextStyle(Color.White, 20, 500)
        }
      }
      .consumeButtonStyle(Color.Green)
      .onClick(() => {
        console.log('我准备开始建立文件夹');
      })

      Button({ type: ButtonType.Capsule, stateEffect: true }) {
        Row({ space: 10 }) {
          Image($r('app.media.icon_new_folder'))
            .consumeImgStyle()
          Text('新建文件')
            .consumeTextStyle(Color.White, 20, 500)
        }
      }
      .consumeButtonStyle(Color.Green)
      .onClick(() => {
        console.log('我准备开始建立文件夹');
      })
    }
    .width('100%')
    .height("100%")
    .justifyContent(FlexAlign.Center)
  }
}


@Extend(Image) function consumeImgStyle() {
  .width(30)
  .height(30)
}

@Extend(Button) function consumeButtonStyle(color: Color) {
  .fontSize(25)
  .width(150)
  .height(65)
  .backgroundColor(color)

}

@Extend(Text) function consumeTextStyle(color: Color, size: number, weight: number) {
  .fontSize(size)
  .fontColor(color)
  .fontWeight(weight)
}

UI结构复用

当页面有多个相同的UI结构时，若每个都单独声明，同样会有大量重复的代码。为避免重复代码，可以将相同的UI结构提炼为一个自定义组件，完成UI结构的复用。

除此之外，ArkTS还提供了一种更轻量的UI结构复用机制@Builder方法，开发者可以将重复使用的UI元素抽象成一个@Builder方法，该方法可在build()方法中调用多次，以完成UI结构的复用。

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

  • @Builder方法可以定义在组件内或者全局
  • @Builder方法定义的是组件内的@Builder方法，可通过this访问当前组件的属性和方法，而全局的@Builder方法则不能
  • @Builder方法定义的是组件内的@Builder方法只能用于当前组件，全局的@Builder方法导出（export）后，可用于整个应用。
javascript 复制代码 
@Entry
@Component
struct BuilderUI {
  @State isOn: boolean = false;
  @State isDel: boolean = false;

  build() {
    Column({ space: 10 }) {
      this.builderButton($r('app.media.icon_delete'), '删除文件', () => {
        console.log('我准备开始删除文件夹');
      })
      globalBuilderButton($r('app.media.icon_new_folder'), '新建文件', () => {
        console.log('我准备开始建立文件夹');
      })
    }
    .width('100%')
    .height("100%")
    .justifyContent(FlexAlign.Center)
  }

  @Builder builderButton(icon: Resource, text: string, callback: () => void) {
    Button({ type: ButtonType.Capsule, stateEffect: true }) {
      Row({ space: 10 }) {
        Image(icon)
          .width(30)
          .height(30)
        Text(text)
          .fontSize(20)
          .fontColor(Color.White)
          .fontWeight(500)
          .backgroundColor(Color.Green)
      }
    }
    .fontSize(25)
    .width(150)
    .height(65)
    .onClick(callback)
  }
}

@Builder function globalBuilderButton(icon: Resource, text: string, callback: () => void) {
  Button({ type: ButtonType.Capsule, stateEffect: true }) {
    Row({ space: 10 }) {
      Image(icon)
        .width(30)
        .height(30)
      Text(text)
        .fontSize(20)
        .fontColor(Color.White)
        .fontWeight(500)
        .backgroundColor(Color.Green)
    }
  }
  .fontSize(25)
  .width(150)
  .height(65)
  .onClick(callback)
}
  • @Builder方法支持参数传递规则，分为按值传递和按引用传递。带有花括号的{ } 为引用传递，其余为值传递。
  • 按引用传递时，若传递的参数为状态变量，则状态变量的变化将会触发@Builder方法内部UI的刷新，而按值传递时则不会。
javascript 复制代码 
@Entry
@Component
struct BuilderUI {
  @State status: number = 10;

  build() {
    Column({ space: 10 }) {
      valueText(this.status)
      referenceText({status:this.status})

      Row({ space: 10 }) {
        Button('值传递 - 1')
          .consumeButtonStyle()
          .onClick(() => {
            this.status--
          })
        Button('引用传递 + 1')
          .consumeButtonStyle()
          .onClick(() => {
            this.status++
          })
      }
    }
    .width('100%')
    .height("100%")
    .justifyContent(FlexAlign.Center)
  }


}

@Builder function valueText(count: number) {
  Text(`进行值传递:  ${count}`).fontSize(30).fontWeight(600)
}

@Builder function referenceText(count: {status:number}) {
  Text(`进行引用传递: ${count.status}`).fontSize(30).fontWeight(600)
  Text('引用参数传递的是状态变量status，这里内部UI会刷新')
}

@Extend(Button) function consumeButtonStyle() {
  .fontSize(20)
  .width(140)
  .height(65)
}
相关推荐
Andy醒1 小时前
HarmonyOS . 沉浸状态栏使用
harmonyos·鸿蒙
yuwinter1 小时前
鸿蒙HarmonyOS学习笔记（2）
笔记·学习·harmonyos
ZZZCY20032 小时前
华为ENSP--IP编址及静态路由配置
网络·华为
jikuaidi6yuan3 小时前
鸿蒙系统（HarmonyOS）分布式任务调度
分布式·华为·harmonyos
智慧化智能化数字化方案9 小时前
华为IPD流程管理体系L1至L5最佳实践-解读
大数据·华为
ZZZCY200310 小时前
华为VER系统及CLI命令熟悉
华为
SameX11 小时前
HarmonyOS Next 安全生态构建与展望
前端·harmonyos
SameX11 小时前
HarmonyOS Next 打造智能家居安全系统实战
harmonyos
Random_index18 小时前
#Uniapp篇：支持纯血鸿蒙&发布&适配&UIUI
uni-app·harmonyos
鸿蒙自习室1 天前
鸿蒙多线程开发——线程间数据通信对象02
ui·harmonyos·鸿蒙
热门推荐
01(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明02PyTorch机器学习实现液态神经网络03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04玄机平台应急响应—webshell查杀05Coze扣子平台完整体验和实践（附国内和国际版对比）06Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO07怎样让音频速度变慢？请跟随以下方法进行操作08Unity中PICO实现 隔空取物 和 接触抓取物体09RAG 实践- Ollama+RagFlow 部署本地知识库10【目标跟踪】相机运动补偿