当前位置: 首页 > news >正文

鸿蒙应用开发从入门到实战(十九):样式复用案例

大家好,我是潘Sir,持续分享IT技术,帮你少走弯路。《鸿蒙应用开发从入门到项目实战》系列文章持续更新中,陆续更新AI+编程、企业级项目实战等原创内容、欢迎关注!

上一篇文章讲解了ArkUI中样式复用思想,本节继续使用自定义组件对商品列表进行优化。

复习知识内容:

  • 创建自定义组件
  • @Builder
  • @Styles

在原来pages/layout/ProductList.ets基础上进行优化

1待优化界面

一、自定义组件优化头部

实际项目开发中,存在多个界面共享顶部的情况。因此把顶部抽取出来作为自定义组件共用。

2多界面共享顶部

1.1 静态头部制作

拷贝ic_public_back.png和ic_public_refresh.png到resources/base/media目录

拷贝pages/layout/list/ProductList.ets文件,重命名为ProductListLast.ets

(直接复制的文件,不会再resources/base/profile/main_pages.json文件中配置路由,需要手动设置:"pages/layout/list/ProductListLast",)

修改标题部分:

// 标题Row() {Image($r('app.media.ic_public_back')).width(30)Text('商品列表').fontSize(30).fontWeight(FontWeight.Bold)Blank()Image($r('app.media.ic_public_refresh')).width(30)}.width('100%')// .height(30) //控制高度.margin({ bottom: 20 })

效果

3顶部完善

1.2 头部抽取为组件

1.2.1 抽取到同一个文件中

// 自定义顶部组件
@Component
struct Header {private title: ResourceStrbuild() {// 标题Row() {Image($r('app.media.ic_public_back')).width(30)Text(this.title) //从外层传入.fontSize(30).fontWeight(FontWeight.Bold)Blank()Image($r('app.media.ic_public_refresh')).width(30)}.width('100%')// .height(30) //控制高度// .margin({ bottom: 20 })  //放到外层控制}
}

原来头部的内容替换为自定义组件使用

// 使用自定义组件Header({ title: '商品列表' }).margin({bottom:20})

效果和原来一致。

1.2.2 单独抽取为一个文件

在pages/component目录新建common目录,新建ArkTS File,名称为:CommonComponents.ets,并将自定义顶部组件代码粘贴进去,并通过export将组件导出。

// 自定义顶部组件
@Component
export struct Header {private title: ResourceStrbuild() {// 标题Row() {Image($r('app.media.ic_public_back')).width(30)Text(this.title) //从外层传入.fontSize(30).fontWeight(FontWeight.Bold)Blank()Image($r('app.media.ic_public_refresh')).width(30)}.width('100%')// .height(30) //控制高度// .margin({ bottom: 20 })  //放到外层控制}
}

回到ProductListLast.ets文件,导入自定义组件

// 导入自定义顶部组件
import {Header} from '../../component/common/CommonComponents'

二、自定义构建函数优化UI结构

以上代码中,可读性较差,可以把商品列表的部分封装起来,自定义组件或自定义构建函数都可以优化。

2.1 全局自定义构建函数

通过@Builder自定义构建函数,将商品卡片信息放置到函数中,函数定义在全局

// 全局自定义构建函数
@Builder function ItemCard(item:Item2){Row({ space: 10 }) {Image(item.image).width(100)Column({ space: 4 }) {if (item.discount) {Text(item.name).fontSize(20).fontWeight(FontWeight.Bold)Text('原价:¥' + item.price).fontColor('#CCC').fontSize(14).decoration({ type: TextDecorationType.LineThrough })Text('折扣价:¥' + (item.price - item.discount)).fontColor('#F36').fontSize(18)Text('补贴:¥' + item.discount).fontColor('#F36').fontSize(18)} else {Text(item.name).fontSize(20).fontWeight(FontWeight.Bold)Text('¥' + item.price).fontColor('#F36').fontSize(18)}}.height('100%').alignItems(HorizontalAlign.Start)}.width('100%').backgroundColor('#FFF').borderRadius(20).height(120).padding(10)
}

将原有线上组件的地方替换为函数调用

ItemCard(item)

这样,界面效果不变,但是代码更简洁,可读性更高。

2.2 局部自定义构建函数

函数定义在组件内部,将以上组件代码拷贝,并去掉function关键字

// 局部自定义构建函数 不要function关键字@Builder  ItemCard(item:Item2){Row({ space: 10 }) {Image(item.image).width(100)Column({ space: 4 }) {if (item.discount) {Text(item.name).fontSize(20).fontWeight(FontWeight.Bold)Text('原价:¥' + item.price).fontColor('#CCC').fontSize(14).decoration({ type: TextDecorationType.LineThrough })Text('折扣价:¥' + (item.price - item.discount)).fontColor('#F36').fontSize(18)Text('补贴:¥' + item.discount).fontColor('#F36').fontSize(18)} else {Text(item.name).fontSize(20).fontWeight(FontWeight.Bold)Text('¥' + item.price).fontColor('#F36').fontSize(18)}}.height('100%').alignItems(HorizontalAlign.Start)}.width('100%').backgroundColor('#FFF').borderRadius(20).height(120).padding(10)
}

在原来商品列表处进行调用,条用局部自定义组件,需要使用this关键字

this.ItemCard(item) //局部组件使用

三、自定义样式装饰器优化样式

3.1 容器全局样式

将Column的通用样式抽取到自定义样式函数fillScreen中

将fillScreen放到组件外

// 自定义全局公共样式
@Styles function fillScreen(){.width('100%').height('100%').backgroundColor('#EFEFEF').padding(20)
}

使用

Column({ space: 8 })
{...}
// 自定义样式
.fillScreen()

3.2 容器局部样式

将fillScreen放到组件内,去掉function关键字

// 自定义局部公共样式@Styles  fillScreen(){.width('100%').height('100%').backgroundColor('#EFEFEF').padding(20)}

使用方式不变,抽取后预览效果一致。

3.3 商品信息样式抽取

将商品信息样式中的价格样式抽取到公共全局样式中,由于fontColor和fontSize是Text专有的,不是公共样式,因此使用@Styles会报错,应该使用Extend(Text),并且Textend只能写在全局。

// 自定义全局价格样式
// @Styles function priceText(){
@Extend(Text) function priceText(){  //Extend继承模式不能写在组件内,只能写在全局.fontColor('#F36').fontSize(18)
}

将原来的样式方法改为自定义方法即可

// .fontColor('#F36')
// .fontSize(18)
.priceText()

这样,不仅代码层次更清晰,还可以更方便的维护和修改,只需要修改公共样式,其它引用的地方就可以直接被修改。

《鸿蒙应用开发从入门到项目实战》系列文章持续更新中,陆续更新AI+编程、企业级项目实战等原创内容,防止迷路,欢迎关注!

http://www.hskmm.com/?act=detail&tid=28526

相关文章:

  • 2025 年最新推荐冰醋酸厂商综合实力排行榜: 厂商定制服务与仓储能力深度解析昆山/太仓/吴江区/吴中区/相城区/姑苏区冰醋酸厂商推荐
  • 中电金信:“源启大模型文本生成算法”成功通过互联网信息服务算法备案
  • 基于MATLAB的禁忌搜索算法解决物流网络枢纽选址问题
  • springboot 项目部署是tomcat么
  • 2025 年最新推荐恒温恒湿试验箱优质厂家榜单:涵盖立式/可程式/小型等多类型设备的精选企业推荐可程式/小型/防爆高低温试/高温高湿试验箱/低温低湿试验箱厂家推荐
  • CSS开发工具推荐与实战经验,让样式开发更高效、更精准
  • 详细揭秘:详细揭秘:集合划分容斥的容斥系数
  • 2025 年冷热冲击试验箱生产厂家最新推荐榜:聚焦三箱 / 两箱 / 吊篮式 / 小型 / 风冷式 / 可程式设备,精选优质企业助力高效选购
  • 学好微积分特别是偏微分方程的数值求解对于学习CFD的好处?
  • 基于Logistic映射与Chen超混沌系统结合DNA分块编解码的图像加密技术
  • 批量文件重命名工具(带撤销功能)
  • Trae与Gitee MCP强强联合:AI编程生态迎来重大升级
  • Web前端入门第 88 问:引入 JavaScript 的 script 标签究竟有多少用法?
  • 我如何控制新增的节点是 leader 还是follower呢?
  • Nuxt3项目Warn:Browserslist: browsers data (caniuse-lite) is 6 months old.
  • 2025 年全屋定制 / 高端 / 装修收纳设计 / 不锈钢橱柜 / 别墅 / 大平层装修公司推荐:苏州伍德家居与百能家居的优质定制解决方案解析
  • 1_数组
  • SAS重要证明结论
  • 2025 年蒸汽发生器厂家最新推荐排行榜:含 800KG 燃气 / 超低氮冷凝 / 400KG 燃气等多类型设备企业优选指南
  • 基于MATLAB的遗传算法(GA)和CPLEX两种方法解决TSP问题
  • 创建数字遗嘱:为亲人留下数字足迹指南
  • 全网首发/Qt结合ffmpeg实现rist推拉流/可信赖的互联网流媒体协议/跨平台支持各个系统
  • 2025 年最新推荐压缩机厂家排行榜:聚焦医药 / 医疗 / 食品 / 冷链 / 工业领域优质企业及核心优势盘点
  • 2025 年灌装机厂家最新推荐权威榜单:聚焦全自动液体定量灌装设备,精选饮用水 / 纯净水 / 矿泉水灌装领域优质企业
  • 2025 年灌装生产线厂家最新推荐排行榜:覆盖饮料 / 矿泉水 / 纯净水 / 桶装水 / 全自动生产线,助力企业精准选购优质设备权威榜单
  • 改了 Nacos 一行配置,搞崩线上支付系统!
  • Vue 创建项目的几种方式
  • 推荐系统评估、偏见与算法解析
  • 从零开始部署Android环境的Jenkins CI/CD流水线(docker环境,Win强大的系统)
  • Gitee Insight领跑DevSecOps赛道:2025研发效能工具全景评测