#夏日挑战赛#一种eTS自定义icon图标组件的思路

原创

鸿蒙开发者社区官方账号 2022-07-28 11:40:22 ©著作权

©著作权归作者所有：来自51CTO博客作者鸿蒙开发者社区官方账号的原创作品，请联系作者获取转载授权，否则将追究法律责任

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%')
  }
}