HarmonyOS NEXT应用开发之跨文件样式复用和组件复用

介绍

本示例主要介绍了跨文件样式复用和组件复用的场景。在应用开发中,我们通常需要使用相同功能和样式的ArkUI组件,例如购物页面中会使用相同样式的Button按钮、Text显示文字,我们常用的方法是抽取公共样式或者封装成一个自定义组件到公共组件库中以减少冗余代码。

效果图预览

使用说明

  1. 点击购物车页面的list列表跳转商品详情页。
  2. 两个页面的button组件、text组件、Image等组件复用相同的样式。
  3. 购物车页面使用了自定义封装的Image+Text的图文复合组件。

实现思路

一、跨文件样式复用

适用场景:当需要向外提供单一组件的样式定制效果时,推荐使用这种方案。使用方在调用接口时,编码量相对方式二更少,仅需几行即可完成调用,使用便捷。

  1. 提供方创建AttributeModifier接口的实现类。
// attributeModifier.ets/*自定义class实现Text的AttributeModifier接口
*/
export class CommodityText implements AttributeModifier<TextAttribute> {textType: TextType = TextType.TYPE_ONE;textSize: number = 15;constructor( textType: TextType, textSize: number) {this.textType = textType;this.textSize = textSize;}applyNormalAttribute(instance: TextAttribute): void {if (this.textType === TextType.TYPE_ONE) {instance.fontSize(this.textSize);instance.fontColor($r('app.color.orange'));instance.fontWeight(FontWeight.Bolder);instance.width($r('app.string.max_size'));} else if (this.textType === TextType.TYPE_TWO) {instance.fontSize(this.textSize);instance.fontWeight(FontWeight.Bold);instance.fontColor($r('sys.color.ohos_id_counter_title_font_color'));instance.width($r('app.string.max_size'));} else if (this.textType === TextType.TYPE_Three) {instance.fontColor(Color.Gray);instance.fontSize(this.textSize);instance.fontWeight(FontWeight.Normal);instance.width($r('app.string.max_size'));} else if (this.textType === TextType.TYPE_FOUR) {instance.fontSize(this.textSize);instance.fontColor($r('app.color.orange'));instance.textAlign(TextAlign.Center);instance.border({ width: $r('app.float.float_1'), color: $r('app.color.orange'), style: BorderStyle.Solid });instance.margin({ right: $r('app.float.float_10') });}}
}
/*枚举文本类型
*/
export enum TextType {TYPE_ONE,TYPE_TWO,TYPE_Three,TYPE_FOUR
}
  1. 使用方创建提供方的AttributeModifier实现类实例,并作为系统组件attributeModifier属性方法的参数传入。
// ShoppingCart.ets
import { CommodityText } from '../common/attributeModifier';@Component
export struct Details {// 使用方创建提供方的AttributeModifier实现类实例@State textOne: CommodityText = new CommodityText(TextType.TYPE_ONE, 15);...    build(){...Text($r('app.string.store_name'))// TODO:知识点:将入参的AttributeModifier类实例与系统组件绑定.attributeModifier(this.textOne).fontColor($r('sys.color.ohos_id_counter_title_font_color'))...}
}// Details.ets
import { CommodityText } from '../common/attributeModifier';@Component
export struct Details {// 使用方创建提供方的AttributeModifier实现类实例@State textOne: MyTextModifier = new MyTextModifier(TextType.TYPE_ONE, 30);...    build(){...Text($r('app.string.commodity_price'))// 动态设置组件样式.attributeModifier(this.textOne).width($r('app.float.float_100'))...}
}
二、跨文件组件复用

适用场景:适用于多个原生组件结合的场景,如Image+Text等复合自定义组件。

  1. 提供方在公共组件库中创建公用的自定义组件,该组件支持外部传入attributeModifier属性。
//CommonText.ets/*** 自定义封装图文组件*/
@Component
export struct ImageText {@State item: string | Resource = $r('app.string.text');@State textOneContent: string | Resource = $r('app.string.text');@State textTwoContent: string | Resource = $r('app.string.text');@State textThreeContent: string | Resource = $r('app.string.text');@State imageSrc: PixelMap | ResourceStr | DrawableDescriptor = $r('app.media.icon');// TODO:知识点:接受外部传入的AttributeModifier类实例,可以只定制部分组件,选择性传入参数。@State textOne: AttributeModifier<TextAttribute> = new TextModifier();@State textTwo: AttributeModifier<TextAttribute> = new TextModifier();@State textThree: AttributeModifier<TextAttribute> = new TextModifier();@State imageModifier: AttributeModifier<ImageAttribute> = new ImageModifier();@State checkboxModifier: AttributeModifier<CheckboxAttribute> = new CheckboxModifier();build() {Row() {Row() {Checkbox().attributeModifier(this.checkboxModifier)// TODO:知识点:AttributeModifier不支持入参为CustomBuilder或Lamda表达式的属性,且不支持事件和手势。image只能单独通过入参传递使用。Image(this.imageSrc).attributeModifier(this.imageModifier)}.margin({ right: $r('app.float.float_10'), bottom: $r('app.float.float_15') })Column({ space: COLUMN_SPACE }) {// TODO:知识点:将入参的AttributeModifier类实例与系统组件绑定Text(this.item).attributeModifier(this.textTwo)Text(this.textThreeContent).attributeModifier(this.textThree)CommonText({ textFour: new TextModifier() })Text(this.textOneContent).attributeModifier(this.textOne).fontColor($r('app.color.orange'))}}.padding({ top: $r('app.float.float_5') }).width($r('app.string.max_size')).height($r('app.string.max_size'))}
}/*自定义class实现image的AttributeModifier接口,用于初始化
*/
class ImageModifier implements AttributeModifier<ImageAttribute> {applyNormalAttribute(instance: ImageAttribute): void {instance.width($r('app.float.float_100'));instance.height($r('app.float.float_100'));}
}/*自定义class实现text的AttributeModifier接口,用于初始化
*/
class TextModifier implements AttributeModifier<TextAttribute> {applyNormalAttribute(instance: TextAttribute): void {instance.fontSize($r('app.float.float_12'));instance.fontColor($r('app.color.orange'));instance.textAlign(TextAlign.Center);instance.border({ width: $r('app.float.float_1'), color: $r('app.color.orange'), style: BorderStyle.Solid });instance.margin({ right: $r('app.float.float_10') });}
}/*自定义class实现checkbox的AttributeModifier接口,用于初始化
*/
class CheckboxModifier implements AttributeModifier<CheckboxAttribute> {applyNormalAttribute(instance: CheckboxAttribute): void {instance.width($r('app.float.float_15'));instance.height($r('app.float.float_15'));}
}
  1. 使用方分别实现Image组件和Text组件的AttributeModifier接口实现类。
/*自定义class实现Image组件的AttributeModifier接口
*/
export class ImageModifier implements AttributeModifier<ImageAttribute> {width: Length | Resource = 0;height: Length | Resource = 0;constructor(width: Length | Resource, height: Length | Resource) {this.width = width;this.height = height;}applyNormalAttribute(instance: ImageAttribute): void {instance.width(this.width);instance.height(this.height);instance.borderRadius($r('app.float.float_10'));}
}/*自定义class实现Text的AttributeModifier接口
*/
export class CommodityText implements AttributeModifier<TextAttribute> {...
}
  1. 使用方创建Image组件和Text组件的AttributeModifier接口实现类实例,并作为提供方自定义组件CustomImageText的入参传入。
@Component
export struct ShoppingCart {// TODO:知识点:使用方创建Image组件和Text组件的AttributeModifier接口实现类实例@State textOne: CommodityText = new CommodityText(TextType.TYPE_ONE, 15);@State textTwo: CommodityText = new CommodityText(TextType.TYPE_TWO, 17);@State textThree: CommodityText = new CommodityText(TextType.TYPE_Three, 15);@State imageModifier: ImageModifier = new ImageModifier(100, 100);@State checkboxModifier: CheckboxModifier = new CheckboxModifier();build() {...// AttributeModifier实例作为提供方自定义组件ImageText的入参传入。ImageText({item: item,textOne: this.textOne,textTwo: this.textTwo,textThree: this.textThree,imageModifier: this.imageModifier,imageSrc: $r('app.media.icon'),checkboxModifier: this.checkboxModifier,textOneContent: $r('app.string.commodity_price'),textTwoContent: $r('app.string.commodity_name'),textThreeContent: $r('app.string.commodity_model')})... }
}

高性能知识点

本示例使用了动态属性设置和自定义封装公共组件,实现了跨文件样式和组件复用,减少了工程很多冗余的代码。

工程结构&模块类型

dynamicattributes
|---common
|   |---AttributeModifier.ets               // 自定义AttributeModifier接口
|   |---CommonText.ets                      // 自定义组件封装
|   |---LazyForEach.ets                     // 懒加载
|---pages
|   |---ShoppingCart.ets                    // 页面一:购物车
|   |---Details.ets                         // 页面二:详情页

模块依赖

本示例依赖路由管理模块。

参考资料

动态属性设置

ArkUI组件封装及复用场景介绍

为了能让大家更好的学习鸿蒙(HarmonyOS NEXT)开发技术,这边特意整理了《鸿蒙开发学习手册》(共计890页),希望对大家有所帮助:https://qr21.cn/FV7h05

《鸿蒙开发学习手册》:

如何快速入门:https://qr21.cn/FV7h05

  1. 基本概念
  2. 构建第一个ArkTS应用
  3. ……

开发基础知识:https://qr21.cn/FV7h05

  1. 应用基础知识
  2. 配置文件
  3. 应用数据管理
  4. 应用安全管理
  5. 应用隐私保护
  6. 三方应用调用管控机制
  7. 资源分类与访问
  8. 学习ArkTS语言
  9. ……

基于ArkTS 开发:https://qr21.cn/FV7h05

  1. Ability开发
  2. UI开发
  3. 公共事件与通知
  4. 窗口管理
  5. 媒体
  6. 安全
  7. 网络与链接
  8. 电话服务
  9. 数据管理
  10. 后台任务(Background Task)管理
  11. 设备管理
  12. 设备使用信息统计
  13. DFX
  14. 国际化开发
  15. 折叠屏系列
  16. ……

鸿蒙开发面试真题(含参考答案):https://qr18.cn/F781PH

鸿蒙开发面试大盘集篇(共计319页):https://qr18.cn/F781PH

1.项目开发必备面试题
2.性能优化方向
3.架构方向
4.鸿蒙开发系统底层方向
5.鸿蒙音视频开发方向
6.鸿蒙车载开发方向
7.鸿蒙南向开发方向

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

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

相关文章

JavaEE 初阶篇-深入了解操作系统中的进程与 PCB

&#x1f525;博客主页&#xff1a; 【小扳_-CSDN博客】 ❤感谢大家点赞&#x1f44d;收藏⭐评论✍ 文章目录 1.0 关于计算机是如何进行工作的 “常识” 1.1 关于寄存器、缓存与内存是如何配合 CPU “工作” 2.0 操作系统概述 2.1 操作系统内核 2.2 进程 2.3 PCB 2.3.1 PCB 属性…

QT增加线程函数步骤流程

在使用线程的时候&#xff0c;不仅要关注线程开启的时机&#xff0c;同时还要关注线程安全退出&#xff0c;这样才能保证程序的健壮性&#xff0c;如果线程开启的较多&#xff0c;且开启关闭比较频繁&#xff0c;建议使用线程池来处理。开启线程有三种方式&#xff1a;第一种C的…

【vue baidu-map】实现百度地图展示基地,鼠标悬浮标注点展示详细信息

实现效果如下&#xff1a; 自用代码记录 <template><div class"map" style"position: relative;"><baidu-mapid"bjmap":scroll-wheel-zoom"true":auto-resize"true"ready"handler"><bm-mar…

怎么轻松制作证件照?推荐这三款制作工具!

在日常生活中&#xff0c;我们经常需要制作各种证件照&#xff0c;如身份证、护照、驾驶证等。为了帮助大家快速、便捷地制作证件照&#xff0c;我将在本文中推荐三款优秀的证件照制作工具&#xff0c;包括国内外的软件&#xff0c;满足不同用户的需求。1.水印云 水印云是一款国…

MQ组件之RabbitMQ学习

MQ组件之RabbitMQ入门 同步调用和异步调用 在微服务架构中&#xff0c;服务之间的调用有同步调用和异步调用两种方式。 我们使用OpenFeign去调用是同步调用&#xff0c;同步调用的缺点很明显&#xff0c;在下图的场景中&#xff0c;支付完成后需要调用订单服务、仓库服务、短…

SpringBoot集成WebService

1&#xff09;添加依赖 <dependency><groupId>org.apache.cxf</groupId><artifactId>cxf-spring-boot-starter-jaxws</artifactId><version>3.3.4</version><exclusions><exclusion><groupId>javax.validation<…

九.pandas绘图基础

目录 九.pandas绘图基础 1-柱状图 --参数stackedTrue堆积 --参数figsize(宽,高) --自定义横坐标 --设置字体&显示负号 2.箱型图 3. 折线图 九.pandas绘图基础 Pandas的DataFrame和Series&#xff0c;在matplotlib基础上封装了一个简易的绘图函数, 使得我们在数据处…

17.WEB渗透测试--Kali Linux(五)

免责声明&#xff1a;内容仅供学习参考&#xff0c;请合法利用知识&#xff0c;禁止进行违法犯罪活动&#xff01; 内容参考于&#xff1a; 易锦网校会员专享课 上一个内容&#xff1a;16.WEB渗透测试--Kali Linux&#xff08;四&#xff09;-CSDN博客 1.ettercap简介与使用…

丘一丘正则表达式

正则表达式(regular expression,regex,RE) 正则表达式是一种用来简洁表达一组字符串的表达式正则表达式是一种通用的字符串表达框架正则表达式是一种针对字符串表达“简洁”和“特征”思想的工具正则表达式可以用来判断某字符串的特征归属 正则表达式常用操作符 操作符说明实…

倪诗韵古琴雷期展示,琴体秀气

音色通透、细腻&#xff0c;灵敏度高&#xff0c;好不好自己听吧&#xff0c;绝对是入门演奏利器。想不想听试音&#xff1f;试音已经发出来了&#xff0c;但是这床琴已经订出去了&#xff0c;不过琴友可以听听雷期的音色&#xff0c;那就关注我吧

Streamlit实战手册:从数据应用到机器学习模型部署

Streamlit实战手册&#xff1a;从数据应用到机器学习模型部署 简介Streamlit核心功能介绍Streamlit的安装创建第一个Streamlit应用界面布局与导航数据处理与展示 Streamlit的进阶应用交互式组件按钮复选框单选按钮滑块 图表与可视化使用Matplotlib绘图使用Plotly创建交互式图表…

视频号下载助手失效了?如何解决下载视频问题!

在刷短视频的时候难免会遇到部分的视频号视频下载不下来&#xff0c;那我们该如何解决视频号下载问题呢&#xff1f; 视频号下载助手解决方案 视频号下载助手失效分为两种情况! 1、可以解析&#xff0c;但不能下载 根据使用视频号下载助手常见的问题&#xff0c;我们发现会有…

超声波气象站和气象雷达有什么区别

TH-CQX5超声波气象站和气象雷达在气象监测领域各自扮演着重要的角色&#xff0c;但它们的工作原理和应用范围存在明显的区别。 首先&#xff0c;超声波气象站的工作原理主要基于超声波在大气中的传播特性。它利用超声波发射器向周围环境发射超声波信号&#xff0c;并通过测量这…

Emotion Prompt-LLM能够理解并能通过情感刺激得以增强

Large Language Models Understand and Can be Enhanced by Emotional Stimuli 情感智能对我们的日常行为和互动产生了显著的影响。尽管大型语言模型&#xff08;LLMs&#xff09;被视为向人工通用智能迈进的一大步&#xff0c;在许多任务中表现出色&#xff0c;但目前尚不清楚…

MES管理系统在生产计划与排产调度流程中的应用

在现代工业生产中&#xff0c;MES管理系统已经成为企业优化生产流程、提升生产效率的重要工具。MES管理系统在生产计划与排产调度中的具体应用&#xff0c;不仅能够帮助企业更好地控制生产过程&#xff0c;还能实现资源的合理配置&#xff0c;从而提高企业的整体竞争力。 首先&…

5G网络架构与组网部署03--5G网络组网部署

1. SA组网与NSA组网 &#xff08;1&#xff09;NSA 非独立组网&#xff1a;终端同时接入4G基站和5G基站&#xff0c;只能实现5G部分功能 &#xff08;2&#xff09;SA组网【最终目标】&#xff1a;5G基站可以单独提供服务&#xff0c;接入的是5G核心网 区别&#xff1a;同一时间…

许战海战略文库|橋頭品牌突破区域局限打透全国市场的4个建议

自宣统元年(公元1908年)起&#xff0c;重庆南岸区海棠溪古石桥边诞生了一家传奇火锅店——桥头火锅。凭借深厚的文化底蕴和独特的风味&#xff0c;历经百年沉淀桥头火锅已成为南岸区乃至中华餐饮文化中的璀璨明珠。 桥头火锅不仅荣获了“中华老字号”和“中国名菜”两项殊荣&a…

Google云计算原理与应用(四)

目录 七、海量数据的交互式分析工具Dremel&#xff08;一&#xff09;产生背景&#xff08;二&#xff09;数据模型&#xff08;三&#xff09;嵌套式的列存储&#xff08;四&#xff09;查询语言与执行&#xff08;五&#xff09;性能分析&#xff08;六&#xff09;小结 八、…

【网络原理】HTTP 请求 (Request)详解

文章目录 &#x1f38d;请求格式&#x1f384;认识URL&#x1f338;query string&#x1f338;关于 URL encode &#x1f340;认识 “方法” (method)&#x1f338;GET方法&#x1f338;POST 方法&#x1f338;GET 和 POST 的区别 &#x1f332;认识请求 “报头” (header)&…

管理能力学习笔记一:角色转身

管理能力学习是为了解决角色转身后面临的更多更复杂的的问题。初晋管理层&#xff0c;需要转变工作习惯&#xff0c;学会分配时间。 角色转身 建立“授权”意识 通过匹配工作内容与下属员工能力&#xff0c;分配工作&#xff0c;避免陷入下属能力不足 -> 不愿授权 -> 下…