鸿蒙应用开发从入门到实战（十九）：样式复用案例

大家好，我是潘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: ResourceStr

  build() {
    // 标题
    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: ResourceStr

  build() {
    // 标题
    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+编程、企业级项目实战等原创内容，防止迷路，欢迎关注！