鸿蒙ArkTS中的image组件

开发文档很详尽,就在DevEco中的API参考,可以随时调出来进行学习。

在鸿蒙官网也有非常详尽的资料,地址:开发说明-API参考概述 - 华为HarmonyOS开发者 (huawei.com)

这里,就学习image组件的一般用法以及使用SVG图标和字体图标,使用SVG图标和字体图标在于图标放大与缩小不失真,可以随意变换颜色。

鸿蒙HarmonyOS NEXT中的image组件一般性用法:

**  1、图片使用网络地址**

复制代码
        Image('http://11.22.33.44/common/banner.jpg')
          .width(270).height(130)
          .onError((error) => {
            console.error('图片加载错误:', error);
            return Text('图片加载失败');
          })

这种方式涉及到跨越和网络访问权限,需要在module.json5中配置网络访问权限:

复制代码
"module": {
  "requestPermissions": [
    {
      "name": "ohos.permission.INTERNET"
    }
  ]
}

在"module"对象中中加入请求权限的属性。

这种方式不推荐使用。

**  2、使用本地图片**

在鸿蒙 ArkTS 中,"./" 表示当前目录,"../" 表示上一级目录。

① ./:表示当前目录。使用 ./ 时,意味着文件位于当前工作目录中。

② ../:表示上级目录。使用 ../ 时,意味着文件位于当前工作目录的上一级目录中。

如果不想遇到麻烦,可以将图形文件拷贝到media目录下再使用。

今天使用image组件遇到各种怪问题,加上预览刷新很慢,很耗时间。

**  3、使用svg格式图片**

可以使用华为的图标库下载对应的图标。

地址:HarmonyOS 主题图标库 | icon素材免费下载 | 华为开发者联盟 (huawei.com)https://developer.huawei.com/consumer/cn/design/harmonyos-icon/

复制代码
Image($r('app.media.ic_contacts_business_cards')).width(160).fillColor(Color.Red)
Image($r('app.media.ic_device_matebook_filled')).width(60).fillColor(Color.Blue)

**  4、使用字体图标**

可以使用阿里巴巴的字体图标。

地址:iconfont-阿里巴巴矢量图标库iconfont-国内功能很强大且图标内容很丰富的矢量图标库,提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴体验团队倾力打造,设计和前端开发的便捷工具https://www.iconfont.cn/search/index?searchType=icon&q=%E9%80%89%E6%8B%A9&page=2&fromCollection=-1

⑴下载字体文件

⑵解压缩文件,将解压缩的文件复制到一个目录。

我在ets目录下新建了一个名为iconfont目录,将文件拷贝到了该目录下。

⑶注册字体

复制代码
    aboutToAppear(): void {
        //注册字体
        font.registerFont({
            familyName:'myfont',
            familySrc:'/iconfont/iconfont.ttf'
        })
    }

⑷使用字体图标

复制代码
Text('\ue613').fontFamily('myfont').fontSize(16).fontColor(Color.Red)

图片的大小通过设置字体大小来改变,颜色可以通过设置字体颜色来改变。

今天看了鸿蒙的参考文档,image有很多的用法,文档资料很全,但是也遇到了很多奇怪的问题,最主要的就是测试起来运行很慢,我尝试着修改配置效果也不明显。

还需要进一步的学习。

相关推荐
坚果的博客10 小时前
坚果派已适配的鸿蒙版flutter库【持续更新】
flutter·华为·开源·harmonyos
NapleC11 小时前
HarmonyOS:Navigation实现导航之页面设置和路由操作
华为·harmonyos·navigation
HMSCore12 小时前
HarmonyOS SDK助力鸿蒙版今日水印相机,真实地址防护再升级
harmonyos
遇见火星13 小时前
华为VRP系统简介&配置TELNET远程登录!
华为·路由器·交换机·telnet·vrp
风中飘爻17 小时前
鸿蒙生态:鸿蒙生态校园行心得
华为·harmonyos
Otaku_尻男17 小时前
HarmonyOS 自定义RenderNode 绘图实战
android·面试·harmonyos
Aqua Cheng.17 小时前
华为开发岗暑期实习笔试(2025年4月16日)
java·算法·华为·动态规划
Linux运维老纪20 小时前
交换机之配置系统基本信息(Basic Information of the Configuration System for Switches)
linux·网络·mysql·华为·云计算·运维开发
高心星1 天前
HarmonyOS 5.0应用开发——MVVM模式的应用
harmonyos·mvvm·鸿蒙5.0·备忘录应用