鸿蒙学习笔记 02 图片

引言&注意

请注意:

• 本文已默认你已掌握ArkTS的使用
• 本文为私人笔记, 可能存在错误及不严谨的内容
• 本文仅用于学习作用

图片组件

基本使用

首先明确, 图片有3种读取的方式, 不过大致是两种方式, 一种是网络图片, 如果你想要看到它, 是需要申请网络权限的!

不过使用的时候很简单, 直接传入图片链接即可.

Image("https://pic.imgdb.cn/item/66c29a95d9c307b7e9518f54.png")

如何申请网络权限呢? 在 modules.json5 中申请即可

如果你需要使用本地的图片, 图片应该被放在如下文件夹中:

随后, 就可以直接使用本地的图片了. 这里使用的方法异常简单, 直接使用$r("app.media.xxx")即可. 这里注意, 使用$r读取图片是不需要任何权限的

Image($r("app.media.startIcon"))

其中, app就是base目录, 编译器会出现主动代码提示; 另外图片是不需要后缀名的, 直接.名称就可以访问了.

还有一个就是rawfile, 这个文件夹中可以放入任何东西, 比如图片. 不过这里的图片不会被加密, 直接就是按照原文件的模式进行打包, 使用的时候差不多, 把r改为rawfile而已. 不过, 这里没有刚刚的app之类的, 直接就是文件名称:

Image($rawfile("avatar.png"))

图片属性

最常见的, 我们需要调整图片的大小, 这里我们只需要设置一个width即可, 不需要设置额外的内容, 图片会自动保持横纵比例进行缩放

Image($r("app.media.app_icon"))
    .width(100)

注意
这里的100不是像素, 是华为的一种自适应大小, 进而保证同一个资源在不同设备上的观感大体一致
同时, 这里也可以写百分数, 不过传入的是一个字符串: .width("80%")

还有一个比较常见的属性, 就是设置插值. 因为有的时候我们的图片可能放大后, 显示出来比较模糊, 这个时候就可以使用插值了, 让图片看起来好那么一点, 下面是使用插值语法前后的变化;

Image($r("app.media.startIcon"))
    .interpolation(ImageInterpolation.High)// 使用图片插值 让模糊的图片变清晰
    .width(150)

插值前这样:
插值后这样:

怎么样, 一丢丢就是一丢丢, 绝不含糊

图片组件最常用的也就这两个了, 关于缩放类型, 后面如果我用到了, 可能会回来补充这篇文章.
你问为什么我不一次性记录完整? 如果那样子为啥我不去看官方文档呢√
我记录博客是作为学习笔记, 只记录一些常用, 重要的东西; 另外开发的时候也是一样, 你不可能啥都记住了, 开发的时候更多的还是需要什么找什么的.