大家好，我是潘Sir，持续分享IT技术，帮你少走弯路。《鸿蒙应用开发从入门到项目实战》系列文章持续更新中，陆续更新AI+编程、企业级项目实战等原创内容、欢迎关注！
上一篇文章讲解了ArkUI中样式复用思想，本节继续使用自定义组件对商品列表进行优化。
复习知识内容：
- 创建自定义组件
- @Builder
- @Styles
在原来pages/layout/ProductList.ets基础上进行优化
一、自定义组件优化头部
实际项目开发中，存在多个界面共享顶部的情况。因此把顶部抽取出来作为自定义组件共用。
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 })
效果
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+编程、企业级项目实战等原创内容，防止迷路，欢迎关注！