鴻蒙應(yīng)用開發(fā)從入門到實戰(zhàn)（十九）：樣式復(fù)用案例

上一篇文章講解了ArkUI中樣式復(fù)用思想，本節(jié)繼續(xù)使用自定義組件對商品列表進(jìn)行優(yōu)化。

大家好，我是潘Sir，持續(xù)分享IT技術(shù)，幫你少走彎路。《鴻蒙應(yīng)用開發(fā)從入門到項目實戰(zhàn)》系列文章持續(xù)更新中，陸續(xù)更新AI+編程、企業(yè)級項目實戰(zhàn)等原創(chuàng)內(nèi)容、歡迎關(guān)注！

上一篇文章講解了ArkUI中樣式復(fù)用思想，本節(jié)繼續(xù)使用自定義組件對商品列表進(jìn)行優(yōu)化。

復(fù)習(xí)知識內(nèi)容：

創(chuàng)建自定義組件
@Builder
@Styles

在原來pages/layout/ProductList.ets基礎(chǔ)上進(jìn)行優(yōu)化

一、自定義組件優(yōu)化頭部

實際項目開發(fā)中，存在多個界面共享頂部的情況。因此把頂部抽取出來作為自定義組件共用。

1.1 靜態(tài)頭部制作

拷貝ic_public_back.png和ic_public_refresh.png到resources/base/media目錄

拷貝pages/layout/list/ProductList.ets文件，重命名為ProductListLast.ets

(直接復(fù)制的文件，不會再resources/base/profile/main_pages.json文件中配置路由，需要手動設(shè)置:"pages/layout/list/ProductListLast",)

修改標(biāo)題部分：

// 標(biāo)題
      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() {
    // 標(biāo)題
    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 })  //放到外層控制
  }
}

原來頭部的內(nèi)容替換為自定義組件使用

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

效果和原來一致。

1.2.2 單獨抽取為一個文件

在pages/component目錄新建common目錄，新建ArkTS File，名稱為：CommonComponents.ets，并將自定義頂部組件代碼粘貼進(jìn)去，并通過export將組件導(dǎo)出。

// 自定義頂部組件
@Component
export struct Header {
  private title: ResourceStr

  build() {
    // 標(biāo)題
    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文件，導(dǎo)入自定義組件

// 導(dǎo)入自定義頂部組件
import {Header} from '../../component/common/CommonComponents'

二、自定義構(gòu)建函數(shù)優(yōu)化UI結(jié)構(gòu)

以上代碼中，可讀性較差，可以把商品列表的部分封裝起來，自定義組件或自定義構(gòu)建函數(shù)都可以優(yōu)化。

2.1 全局自定義構(gòu)建函數(shù)

通過@Builder自定義構(gòu)建函數(shù)，將商品卡片信息放置到函數(shù)中，函數(shù)定義在全局

// 全局自定義構(gòu)建函數(shù)
@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('補(bǔ)貼：￥' + 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)
}

將原有線上組件的地方替換為函數(shù)調(diào)用

ItemCard(item)

這樣，界面效果不變，但是代碼更簡潔，可讀性更高。

2.2 局部自定義構(gòu)建函數(shù)

函數(shù)定義在組件內(nèi)部，將以上組件代碼拷貝，并去掉function關(guān)鍵字

// 局部自定義構(gòu)建函數(shù) 不要function關(guān)鍵字
  @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('補(bǔ)貼：￥' + 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)
}

在原來商品列表處進(jìn)行調(diào)用，條用局部自定義組件，需要使用this關(guān)鍵字

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

三、自定義樣式裝飾器優(yōu)化樣式

3.1 容器全局樣式

將Column的通用樣式抽取到自定義樣式函數(shù)fillScreen中

將fillScreen放到組件外

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

使用

Column({ space: 8 })
{...}
// 自定義樣式
.fillScreen()

3.2 容器局部樣式

將fillScreen放到組件內(nèi)，去掉function關(guān)鍵字

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

使用方式不變，抽取后預(yù)覽效果一致。

3.3 商品信息樣式抽取

將商品信息樣式中的價格樣式抽取到公共全局樣式中，由于fontColor和fontSize是Text專有的，不是公共樣式，因此使用@Styles會報錯，應(yīng)該使用Extend(Text)，并且Textend只能寫在全局。

// 自定義全局價格樣式
// @Styles function priceText(){
@Extend(Text) function priceText(){  //Extend繼承模式不能寫在組件內(nèi)，只能寫在全局
  .fontColor('#F36')
  .fontSize(18)
}

將原來的樣式方法改為自定義方法即可

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

這樣，不僅代碼層次更清晰，還可以更方便的維護(hù)和修改，只需要修改公共樣式，其它引用的地方就可以直接被修改。

《鴻蒙應(yīng)用開發(fā)從入門到項目實戰(zhàn)》系列文章持續(xù)更新中，陸續(xù)更新AI+編程、企業(yè)級項目實戰(zhàn)等原創(chuàng)內(nèi)容，防止迷路，歡迎關(guān)注！

posted @ 2025-10-11 11:35 程序員潘Sir 閱讀(152) 評論(0) 收藏舉報

刷新頁面返回頂部