鸿蒙组件学习_Image组件

说明

该组件从API Version 7 开始支持

使用网络图片时,需要申请ohos.permission.INTERNET

参数

必填

复制代码
src     图片的数据源,支持本地图片和网络图片
不支持跨包跨模块调用该Image组件,建议使用$r方式来管理需全局使用的图片资源。
属性
复制代码
alt     加载时显示的占位图,支持本地图片
objectFit   设置图片的缩放类型。默认值: ImageFit.Cover
    ImageFit.Cover  放大图片以适应容器,可能会裁剪
    ImageFit.Contain缩放图片以适应容器,可能存在空白
    ImageFit.Fill   图片拉伸以填充容器,可能会出现失真
    ScaleDown   图片按比例缩小以适应边界,但是不会放大图片
    Auto    自适应显示
    None    不进行任何缩放操作,即使图片溢出容器也不会被裁剪或缩放
objectRepeat    设置图片的重复样式。默认值: ImageRepeat.NoRepeat
    ImageRepeat.NoRepeat    不重复图片
    ImageRepeat.X   横向重复图片
    ImageRepeat.Y   纵向重复图片
    ImageRepeat.XY  横纵重复图片
interpolation   设置图片的插值效果,即减轻低清晰度图片在放大显示的时候出现的锯齿问题,仅针对图片放大插值
    Low、Medium、High
renderMode  设置图片渲染的模式
    imageRenderMode.Original    原图渲染
    imageRenderMode.Template    只保留灰度
sourceSize  设置图片裁剪尺寸,将原始图片解码成pixelMap,指定尺寸的图片
matchTextDirection  设置图片是否跟随系统语言方向
fitOriginalSize     图片组件尺寸未设置时,是否原尺寸显示
fillColor   填充颜色,仅对svg图片生效,默认false
autoResize  对图源做resize操作,默认true
syncLoad    设置是否同步加载图片,默认false
copyOption  设置图片是否可复制,SVG图片不支持复制
colorFilter 设置图片颜色滤镜效果
事件
复制代码
onComplete(({width,height,componentWidth,componentHeight}) => {})   图片成功加载时触发
onError({componentWidth,componentHeight} => {}) 图片加载出现异常时触发
onFinish(() => {})  当加载的源文件为带动效的svg图片时,当svg动效播放完成时触发

@Entry
@Component
struct Image_test{
 build(){
   Column() {
     List() {
       ListItem(){
         Image($r('app.media.icon'))
           .objectFit(ImageFit.Auto)
           .alt($r('app.media.app_icon'))
       }.height(100)
       .backgroundColor(Color.Green)

       ListItem() {
         Image($r('app.media.icon'))
           .objectFit(ImageFit.None)
           .alt($r('app.media.app_icon'))
       }.height(100)
       .backgroundColor(Color.Pink)

       ListItem() {
         Image($r('app.media.icon'))
           .objectFit(ImageFit.ScaleDown)
           .alt($r('app.media.app_icon'))
       }.height(100)
       .backgroundColor(Color.Green)

       ListItem() {
         Image($r('app.media.icon'))
           .objectFit(ImageFit.Contain)
           .alt($r('app.media.app_icon'))
       }.height(100)
       .backgroundColor(Color.Pink)

       ListItem(){
         Image($r('app.media.icon'))
           .objectFit(ImageFit.Cover)
           .alt($r('app.media.app_icon'))
       }.height(100)
       .backgroundColor(Color.Green)

       ListItem(){
         Image($r('app.media.icon'))
           .objectFit(ImageFit.Fill)
           .alt($r('app.media.app_icon'))
       }.height(100)
       .backgroundColor(Color.Green)
     }
   }
 }
}

@Entry
@Component
struct Image_test{
 build(){
   Column() {
     Image($r('app.media.icon'))
       .objectFit(ImageFit.Contain)
       .alt($r('app.media.app_icon'))
       .objectRepeat(ImageRepeat.Y)
       .interpolation(ImageInterpolation.Medium)
       .renderMode(ImageRenderMode.Template)
       .fitOriginalSize(false)
   }
 }
}
相关推荐
viperrrrrrrrrr73 小时前
大数据学习(96)-Hive面试题
大数据·hive·学习
charlie1145141914 小时前
STM32F103C8T6单片机的起始点:使用GPIO输出点亮我们的第一个小灯(HAL库版本)
stm32·单片机·嵌入式硬件·学习·教程·hal库·gpio
每次的天空5 小时前
Android学习总结之算法篇五(字符串)
android·学习·算法
奕天者6 小时前
C++学习笔记(三十三)——forward_list
c++·笔记·学习
武昌库里写JAVA7 小时前
Golang的消息中间件选型
java·开发语言·spring boot·学习·课程设计
breakloop7 小时前
量化交易从0到1(理论篇)
笔记·学习·量化交易
大白的编程日记.8 小时前
【Linux学习笔记】初识进程概念和进程PCB
linux·笔记·学习
每次的天空8 小时前
Flutter学习总结之Android渲染对比
android·学习·flutter
跳跳的向阳花9 小时前
08、Docker学习,常用安装:ClickHouse
学习·clickhouse·docker
i200212099 小时前
【Harmonyos】项目开发总结--摇杆拖动侧重实现(适用游戏摇杆)
游戏·华为·面试·harmonyos·鸿蒙·鸿蒙系统