HarmonyOS Next快速入门:Image组件

简介: 本教程摘自《HarmonyOS Next快速入门》,专注于HarmonyOS应用开发中的Image组件使用。Image组件支持多种图片格式(如png、jpg、svg等),可渲染本地资源、网络图片、媒体库文件及PixelMap像素图。通过设置`objectFit`属性,实现不同缩放类型;利用`fillColor`属性调整矢量图颜色。示例代码涵盖本地、网络及资源图片的加载与样式设置,同时需在`module.json5`中声明网络权限以加载外部资源。适合开发者快速掌握HarmonyOS图像展示功能。

HarmonyOS Next快速入门##HarmonyOS应用开发##教育

点击跳转《HarmonyOS Next快速入门》视频教程

Image组件用来渲染展示图片,它可以让界面变得更加丰富多彩。

例如:按钮中的icon、网络图片、本地图片等。在应用中显示图片需要使用Image组件实现,Image支持多种图片格式,包括png、jpg、bmp、svg、gif和heif。

Image组件数据源

  • 本地资源:存放在ets文件夹下,引用根目录ets文件夹下的资源路径即可。
  • Resource资源:通过$r资源接口读取并转换到Resource格式。
  • 网络资源:引用网络地址,需在module.json5文件中申明网络访问权限ohos.permission.INTERNET。
  • 媒体库file://data/storage。支持file://路径前缀的字符串,用于访问通过选择器提供的图片路径。
  • 多媒体像素图:PixelMap是图片解码后的像素图,将加载的网络图片返回的数据解码成PixelMap格式,再显示在Image组件上。

图片地址:https://imagepphcloud.thepaper.cn/pph/image/208/499/752.jpg
在module.json5文件中申明网络访问权限:

{
   
    "module" : {
   
        "requestPermissions":[
           {
   
             "name": "ohos.permission.INTERNET"
           }
        ]
    }
}

Image组件可显示矢量图(svg格式的图片),使用fillColor属性改变图片的绘制颜色。

.fillColor(value: ResourceColor)

设置缩放类型:objectFit属性

.objectFit(value: ImageFit)

ImageFit枚举类型:

  • ImageFit.Contain:保持宽高比进行缩小或者放大,使得图片完全显示在显示边界内。
  • ImageFit.Cover(默认值):保持宽高比进行缩小或者放大,使得图片两边都大于或等于显示边界。
  • ImageFit.Auto:自适应显示。
  • ImageFit.Fill:不保持宽高比进行放大缩小,使得图片充满显示边界。
  • ImageFit.ScaleDown:保持宽高比显示,图片缩小或者保持不变。
  • ImageFit.None:保持原有尺寸显示。

代码实例:ImagePage

@Entry
@Component
struct ImagePage {
   
  @State message: string = 'Image组件';

  build() {
   
    Column({
   space:6}) {
   
      Text(this.message)
        .fontSize(30)
        .fontWeight(FontWeight.Bold)

      Image('images/panda.jpg').width(100)

      Image($r('app.media.cat')).width(100)
      Image($r('app.media.cat')).width(100).height(200).objectFit(ImageFit.Fill)

      Image('https://imagepphcloud.thepaper.cn/pph/image/208/499/752.jpg').width("100%")

      Image($r('app.media.add')).width(50).fillColor(Color.Blue)
    }
    .height('100%')
    .width('100%')
  }
}
目录
相关文章
|
15天前
|
开发者 容器
鸿蒙应用开发从入门到实战(十四):ArkUI组件Column&Row&线性布局
ArkUI提供了丰富的系统组件,用于制作鸿蒙原生应用APP的UI,本文主要讲解Column和Row组件的使用以及线性布局的方法。
125 12
|
16天前
|
API 数据处理
鸿蒙应用开发从入门到实战(十三):ArkUI组件Slider&Progress
ArkUI提供了丰富的系统组件,用于制作鸿蒙原生应用APP的UI,本文主要讲解滑块Slider和进度条Progress组件的使用。
|
18天前
|
数据安全/隐私保护 开发者
鸿蒙应用开发从入门到实战(十一):ArkUI组件Text&TextInput
ArkUI提供了丰富的系统组件,用于制作鸿蒙原生应用APP的UI,本文主要讲解文本组件Text和TextInput的使用。
135 3
|
16天前
|
API 数据处理
鸿蒙应用开发从入门到实战(十三):ArkUI组件Slider&Progress
ArkUI提供滑块Slider与进度条Progress组件,用于鸿蒙原生APP开发。Slider支持拖动调节音量、亮度等,可设步长、方向及提示气泡;Progress支持线性、环形等多种样式,可自定义颜色、宽度与刻度,实时显示任务进度。
114 2
|
17天前
|
开发者
鸿蒙应用开发从入门到实战(十二):ArkUI组件Button&Toggle
ArkUI提供了丰富的系统组件,用于制作鸿蒙原生应用APP的UI,本文主要讲解按钮组件Button和Toggle的使用。
128 2
|
19天前
|
存储 编解码 JSON
鸿蒙应用开发从入门到实战(十):ArkUI图片组件Image
ArkUI提供了丰富的系统组件,用于制作鸿蒙原生应用APP的UI,本文主要讲解Image图片组件的使用。
133 1
|
12天前
|
传感器 监控 安全
HarmonyOS NEXT 5.0 的星闪(NearLink)开发应用案例
V哥分享HarmonyOS NEXT 5.0星闪开发实战,涵盖智能车钥匙无感解锁与工业传感器监控。低延迟、高可靠,代码完整,速来学习!
126 0
|
4月前
|
容器
HarmonyOS NEXT仓颉开发语言实战案例:外卖App
仓颉语言实战分享,教你如何用仓颉开发外卖App界面。内容包括页面布局、导航栏自定义、搜索框实现、列表模块构建等,附完整代码示例。轻松掌握Scroll、List等组件使用技巧,提升HarmonyOS应用开发能力。
|
3月前
|
安全 JavaScript API
鸿蒙开发核心要素
鸿蒙开发核心要素
|
4月前
|
存储 IDE 定位技术
【HarmonyOS 5】鸿蒙组件&模板服务详解 - 助力高效开发的利器
在移动应用开发领域,效率与质量始终是开发者追求的核心目标。鸿蒙系统作为新兴的操作系统,为开发者提供了丰富且强大的开发资源,其中鸿蒙组件&模板服务更是成为开发者快速构建高质量应用的得力助手。
142 0