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

目录

样式复用

@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) 是重复的

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

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

@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方法之后代码。

@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方法
定义格式如下。

@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方法之后代码。

@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）后，可用于整个应用。
@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的刷新，而按值传递时则不会。
@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)
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/771138.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

150 Linux C++ 通讯架构实战5 nginx源码学习方法，终端和进程的关系，信号的复习，fork复习，守护进程复习

150 Linux C++ 通讯架构实战5 nginx源码学习方法，终端和进程的关系，信号的复习，fork复习，守护进程复习

一 nginx源码学习方法 泛读 nginx 中的一些重要代码 把 nginx中最重要的代码提取出来作为我们自己知识库的一部分。 二 终端和进程的关系 pts 是虚拟终端的意思，也就是我们用的xshell之类的链接linux的终端 1.终端 ， shell ， bash 的关系 在…
阅读更多...
【链表】Leetcode 146. LRU 缓存【中等】

【链表】Leetcode 146. LRU 缓存【中等】

LRU 缓存 请你设计并实现一个满足 LRU (最近最少使用) 缓存 约束的数据结构。 实现 LRUCache 类： LRUCache(int capacity) 以 正整数 作为容量 capacity 初始化 LRU 缓存int get(int key) 如果关键字 key 存在于缓存中，则返回关键字的值，否…
阅读更多...
CTF题型 Python中pickle反序列化进阶利用例题opache绕过

CTF题型 Python中pickle反序列化进阶利用例题opache绕过

CTF题型 pickle反序列化进阶&例题&opache绕过 文章目录 CTF题型 pickle反序列化进阶&例题&opache绕过一.基础的pickle反序列化例题1.[HFCTF 2021 Final]easyflask2.[0xgame 2023 Notebook]3.[[HZNUCTF 2023 preliminary\]pickle](https://www.nssctf.cn/proble…
阅读更多...
大数据系列 | 使用Nginx作为数据采集接收端

大数据系列 | 使用Nginx作为数据采集接收端

大数据系列 | 使用Nginx作为数据采集接收端 1. 编译安装Nginx2. 通过程序对Nginx上传日志 1. 编译安装Nginx Nginx依赖包安装： rootnginx:~# apt install -y vim lua-devel gcc gcc-c autoconf automake zlib zlib-devel openssl openssl-devel gcc zlib1g-dev lib…
阅读更多...
蓝桥杯java---螺旋矩阵

蓝桥杯java---螺旋矩阵

解题思路&#xff1a; int [][] arr new int[n][m];int i 0, j -1, temp 1;while (n * m > 0){for (int p 0; p < m; p)//从左自右arr[i][jj1] temp;n--;if (n * m 0) break;for (int p 0; p < n; p)//从上自下arr[ii1][j] temp;m--;if (n * m 0) break;fo…
阅读更多...
分享一个免费查海关（HS）编码的工具

分享一个免费查海关（HS）编码的工具

用过海关数据的朋友就会发现&#xff0c;因为现在大部分的海关数据都是国外的进口数据&#xff0c;所以如果要用海关编码去查相关产品的海关交易记录的话&#xff0c;最好的方法就是用当地的海关编码去搜。 各个国家的海关编码是不一样的&#xff0c;比如美国的一般是6-8位&am…
阅读更多...
构造函数与析构函数

构造函数与析构函数

构造函数 每次创建类的新对象时执行构造函数的名称与类名相同&#xff0c;不带类型&#xff0c;可以有参数也可以没参数构造函数有时给成员函数付初值 析构函数 每次删除所创建的对象时执行析构函数与构造函数类似&#xff0c;前面多个~不带任何参数&#xff0c; #include …
阅读更多...
【笔试】美团2024年春招第二场笔试（技术）

【笔试】美团2024年春招第二场笔试（技术）

【笔试】美团2024年春招第二场笔试&#xff08;技术&#xff09; 文章目录 T1 模拟T2 模拟T3 模拟&#xff0c;快速幂/打表T4 众数、前缀和、树状数组T5 逆序对&#xff0c;树状数组 T1 模拟 题目&#xff1a;数组求和&#xff0c;判断是否要减一个数 思路&#xff1a;模拟即可…
阅读更多...
FPGA时钟资源详解（3）——全局时钟资源

FPGA时钟资源详解（3）——全局时钟资源

FPGA时钟系列文章总览&#xff1a;FPGA原理与结构&#xff08;14&#xff09;——时钟资源https://ztzhang.blog.csdn.net/article/details/132307564 一、概述 全局时钟是 FPGA 中的一种专用互连网络&#xff0c;旨在将时钟信号分配到 FPGA 内各种资源的时钟输入处。这种设计…
阅读更多...
如何查看ubuntu服务器上防火墙信息

如何查看ubuntu服务器上防火墙信息

1、检查防火墙状态&#xff1a; Ubuntu 18.04及更高版本使用的是ufw&#xff08;Uncomplicated Firewall&#xff09;。您可以使用以下命令检查ufw是否已安装并处于运行状态&#xff1a; sudo ufw status如果ufw已安装并正在运行&#xff0c;则会显示防火墙的状态&#xff08…
阅读更多...
使用Shell脚本进行MySql权限修改

使用Shell脚本进行MySql权限修改

背景&#xff1a;原先数据配置文件中有bind-address127.0.0.1&#xff0c;注释掉此配置后&#xff0c;原数据库中默认带%root的权限&#xff0c;现在需要通过脚本实现白名单列表中的ip添加权限允许访问数据库&#xff0c;白名单之外的ip没有权限访问数据库。 以下是过程中记录的…
阅读更多...
免费redis可视化工具windows/mac都可以使用，开源免费

免费redis可视化工具windows/mac都可以使用，开源免费

官方地址&#xff1a;RedisInsight | The Best Redis GUI github开源地址&#xff1a;GitHub - RedisInsight/RedisDesktopManager Redis Desktop Manager – Redis可视化管理工具、redis图形化管理工具、redis可视化客户端、redis集群管理工具。 官方下载方式 滚动到页面底…
阅读更多...
FPGA时钟资源详解（4）——区域时钟资源

FPGA时钟资源详解（4）——区域时钟资源

FPGA时钟系列文章总览&#xff1a;FPGA原理与结构&#xff08;14&#xff09;——时钟资源https://ztzhang.blog.csdn.net/article/details/132307564 目录 一、概述 二、Clock-Capable I/O 三、I/O 时钟缓冲器 —— BUFIO 3.1 I/O 时钟缓冲器 3.2 BUFIO原语 四、区域时钟…
阅读更多...
mybatisplus和mybatis兼容问题

mybatisplus和mybatis兼容问题

Invalid bound statement (not found) 错误 原xml配置 <bean id"sqlSessionFactory" class"org.mybatis.spring.SqlSessionFactoryBean"><property name"mapperLocations" value"classpath:/META-INF/mapper/*.xml"/>&l…
阅读更多...
Vue3——如何实现页面访问拦截

Vue3——如何实现页面访问拦截

引言 在现代的Web开发中&#xff0c;页面访问拦截是一个非常常见的需求。通过拦截页面访问&#xff0c;我们可以控制用户在访问特定页面之前需要满足的条件&#xff0c;比如登录状态、权限等。Vue是一个非常流行的JavaScript框架&#xff0c;它提供了许多强大的工具和功能&…
阅读更多...
ruoyi-nbcio-plus基于vue3的flowable多实例审批单元的升级修改

ruoyi-nbcio-plus基于vue3的flowable多实例审批单元的升级修改

更多ruoyi-nbcio功能请看演示系统 gitee源代码地址 前后端代码&#xff1a; https://gitee.com/nbacheng/ruoyi-nbcio 演示地址&#xff1a;RuoYi-Nbcio后台管理系统 http://122.227.135.243:9666/ 更多nbcio-boot功能请看演示系统 gitee源代码地址 后端代码&#xff1a…
阅读更多...
High 级别反射型 XSS 攻击演示（附链接）

High 级别反射型 XSS 攻击演示（附链接）

环境准备 如何搭建 DVWA 靶场保姆级教程&#xff08;附链接&#xff09;https://eclecticism.blog.csdn.net/article/details/135834194?spm1001.2014.3001.5502 测试 打开靶场找到该漏洞页面 先右键检查输入框属性 还是和之前一样的&#xff0c;所以直接输入 HTML 标签提交…
阅读更多...
比较器offset测算的三种方法

比较器offset测算的三种方法

阅读更多...
Vue 发送Ajax请求多种方式

Vue 发送Ajax请求多种方式

1. 发送ajax请求的方式 方案一&#xff1a;jq 的ajax&#xff08;在 vue 中不推荐同时使用&#xff09;方案二&#xff1a;js 原始官方 fetch方法方案三&#xff1a;axios 第三方 2. 方案一 后端视图函数 from rest_framework.viewsets import ViewSet from rest_framework…
阅读更多...
Rust 实战练习 - 7. FFI, 库, ABI, libc

Rust 实战练习 - 7. FFI, 库, ABI, libc

FFI FFI&#xff08;Foreign Function Interface&#xff09;是这样一种机制&#xff1a;用一种编程语言写的程序能调用另一种编程语言写的函数&#xff08;routines&#xff09;。 调用约定&#xff0c;类型表示和名称修饰这三者的统称&#xff0c;即是众所周知的应用二进制…
阅读更多...
最新文章

Copyright @ 2022~2023