「Mac畅玩鸿蒙与硬件12」鸿蒙UI组件篇2

「Mac畅玩鸿蒙与硬件12」鸿蒙UI组件篇2 - Image组件的使用

news2024/11/26 18:42:34

在鸿蒙应用开发中，Image 组件用于加载和显示图片资源，并提供多种属性来控制图片的显示效果和适配方式。本篇将带你学习如何在鸿蒙应用中加载本地和远程图片、设置图片样式以及实现简单的图片轮播功能。

在这里插入图片描述

关键词

Image 组件
图片加载
本地资源
远程图片
图片轮播

一、Image 组件基础

Image 组件主要用于显示图片资源，支持加载本地和远程图片，并能通过多种方式控制图片的大小和缩放模式。

1.1 加载本地图片

将图片资源放在项目的 resources 文件夹下，使用 $r 引用图片：

// 加载本地图片，引用路径为资源文件夹中的 app.media.sampleImage
Image($r('app.media.sampleImage'))

1.2 加载远程图片

直接传入图片 URL，即可实现远程图片的加载：

// 加载远程图片，通过 URL 直接加载网络图片
Image('https://example.com/sample.jpg')

1.3 设置图片大小

使用 width 和 height 来指定图片尺寸：

// 设置图片大小为 100x100
Image($r('app.media.sampleImage'))
  .width(100)  // 设置宽度为 100
  .height(100) // 设置高度为 100

1.4 图片缩放模式

使用 objectFit 设置图片的缩放模式（如填充、适应、覆盖等）：

// 使用 Cover 模式填充图片，可能会裁剪图片边缘
Image($r('app.media.sampleImage'))
  .objectFit(ImageFit.Cover)

缩放模式	描述
`ImageFit.Cover`	图片覆盖整个区域，可能部分裁剪
`ImageFit.Contain`	图片适应区域，保持宽高比
`ImageFit.Fill`	图片拉伸填满整个区域
`ImageFit.ScaleDown`	图片缩小适应区域，不放大

二、Image 组件样式与圆角

Image 组件支持多种样式设置，包括圆角、边框和阴影效果，使图片展示更具个性化。

2.1 设置圆角

使用 borderRadius 设置图片的圆角效果：
```
// 设置图片圆角为 20
Image
```

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2228209.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！