#夏日挑戰賽#一種eTS自定義icon圖示元件的思路

本文正在參加星光計劃3.0–夏日挑戰賽

1. 圖示介紹

應用程式中圖示作為UI界面視覺組成的一部分，其可以替代文字表達出文字的含義。如底部頁籤使用圖示+文字的方式視覺效果更明顯，使用不同的圖示表示天氣狀态等。

本節将建構适用于HarmonyOS/OpenHarmony icon圖示元件庫（基于eTS+Api8）。

2. 圖示分類

• 圖檔圖示，如

  png

  ，

  jpg

  等格式，缺點是占用存儲大，且尺寸固定，放大縮小會使圖像變虛，多個顔色的圖示需要多張圖檔。一般用于應用程式圖示。
• 字元圖示常見的是Unicode特殊字元、Unicode變種Font Class、全新方式Symbol。字元圖示優勢在于占體小，易操作（可以像操作字型一樣），單個多顔色的圖示隻需要一個即可。

3. 自定義icon圖示

1）建立項目并建立icon子產品

• 打開DevEco Studio建立項目

  TeCustomIcon

  （名稱根據自己的項目命名），注意Ability Template選擇HarmonyOS模闆
• 項目名稱右鍵

  New > Module

  ，打開子產品建立視窗，選擇Ohos Library，點選Next填寫子產品名稱。

2）建構icon子產品并引入

• 點選Project頁簽中的

  tetcl_icon

  子產品，然後點選菜單欄

  Build > Make Module 'tetcl_icon'

  進行建構
• 控制台出現

  BUILD SUCCESSFUL

  表示建構成功
• 打開

  TeCustomIcon > entry > package.json

  ，在

  dependencies

  中添加建構的自定義icon子產品

{
  "name": "entry",
  "version": "1.0.0",
  "ohos": {
    "org": "huawei",
    "buildTool": "hvigor",
    "directoryLevel": "module"
  },
  "description": "example description",
  "repository": {},
  "license": "ISC",
  "dependencies": {
    "@ohos/tetcl_icon": "file:../tetcl_icon"
  }
}
           

其中

@ohos/tetcl_icon

為

tetcl_icon

子產品下

package.json

檔案中的

name

屬性。

然後點選編輯器上方的Sync Now進行同步。

• 初始建立的

  tetcl_icon

  子產品，官方預設提供了

  MainPage

  ，可以引入到

  TeCustomIcon/entry

  中嘗試是否構模組化塊成功。修改

  TeCustomIcon/entry/src/main/ets/MainAbility/pages/index.ets

  代碼如下：

import {MainPage} from '@ohos/tetcl_icon/index'

@Entry
@Component
struct Index {
  build() {
    Row() {
      MainPage({message: "Hello HarmonyOS/OpenHarmony"})
    }
    .height('100%')
  }
}
           

點選視窗右側的Previewer打開預覽器，預覽效果。

至此證明我們的

tetcl_icon

子產品是正确的。

• 注意：控制台報如下錯誤，需要打開

  MainPage

  删除

  @Entry

  注解，然後重新建構一次。

[Compile Result]  ETS:WARN File: F:\Huawei\HarmonyOSWorkspace\TeCustomIcon\entry\src\main\ets\MainAbility\pages\index.ets
[Compile Result]  It's not a recommended way to export struct with @Entry decorator, which may cause ACE Engine error in component preview mode.  
[Compile Result]  ETS:WARN File: F:\Huawei\HarmonyOSWorkspace\TeCustomIcon\tetcl_icon\index.ets
[Compile Result]  It's not a recommended way to export struct with @Entry decorator, which may cause ACE Engine error in component preview mode.  
[phone][Console    INFO]  07/25 11:26:45 5340   app Log: Application onCreate

           

3）實作自定義icon圖示

• 這裡以使用者圖示為例，在阿裡巴巴矢量圖示庫搜尋使用者圖示，選擇一個圖示并複制svg代碼，然後在

  tetcl_ico/src/main/ets/resources/

  建立

  rawfile

  檔案夾同時建立

  user.svg

  。将複制的svg代碼粘貼到

  user.svg

  中，使用Ctrl+Alt+L格式化代碼，并删除報錯屬性值，在

  path

  标簽加入

  fill

  屬性設定預設顔色

  <path d="..." fill="#f2f2f2"></path>

  

• 在

  tetcl_icon/src/main/ets/components

  中建立

  TeIcon.ets

  檔案，并編寫如下代碼：

/**
 * @Description 自定義圖示
 * @date 2022/7/25 11:20
 * @Author Bai XiaoMing
 * @Version 1.0
 */

@Component
export struct TeIcon {
  size: number //設定icon圖示寬高
  color: ResourceColor //填充圖示顔色
  build() {
    Image($rawfile('user.svg')).width(this.size).height(this.size).fillColor(this.color)
  }
}
           

• 在

  tetcl_icon/src/index.ets

  中導出自定義的icon圖示

export { TeIcon } from './src/main/ets/components/TeIcon'
           

4）引入自定義icon圖示

• 修改

  TeCustomIcon/entry/src/main/ets/MainAbility/pages/index.ets

  代碼如下：

import {TeIcon} from '@ohos/tetcl_icon/index'

@Entry
@Component
struct Index {
  build() {
    Flex({alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center}) {
      TeIcon({size: 100, color: 0x554466})
    }
    .height('100%')
  }
}
           

• 使用預覽器預覽效果

  

至此我們自定義的icon圖示庫已經實作了，你可以在此基礎上繼續完善。

附件連結：https://ost.51cto.com/resource/2217