【学习日志】基础组件：Image图片组件

Cyx080811

已于 2024-11-02 21:33:33 修改

阅读量331

点赞数 8

文章标签：学习 java 服务器

于 2024-10-12 16:16:50 首次发布

本文链接：https://blog.youkuaiyun.com/Cyx080811/article/details/142880212

版权

Image的使用

1.直接放在media里；（ src/main/resources/base/media）

Image($r("app.media.EG")) .width("200").height("300")//$r是预定义变量，指向resources里

2.直接在 ets下的任意目录

Image("imgs/tu.webp").width(200);
Image("yu.webp").width(200);

3.直接使用网络图片

Image("https://img1.baidu.com/it/u=624330216,2441586362&fm=253&fmt=auto&app=138&f=JPEG?w=794&h=438")
  .width(200).height(200);

4.放在 rawfile里（src/main/resources/rawfile）

测试：点击切换图片

  Column(){
      // Text(this.name)
      Image(this.Img[this.Index]).width(200).onClick(()=>{
        this.Index++;
        if(this.Index==4){
          this.Index=0;
        }
      })
}

Image常用属性

1.ObjectFit:设置图片

ScaleDown图片原本大小 /None 没有设置

Row(){
  Image("yu.webp").width(200).height(200)
    .objectFit(ImageFit.ScaleDown)
}.width(300).height(300).border({
  width:2
})

Contain容器包含图片

Cover图片覆盖容器

Auto图片自动适配容器

Fill填充容器

引入SVG图的时候可以直接设置图片颜色

2.objectRepeat 图片是否循环

外框大小要大于图片大小

Image($r("app.media.startIcon"))
  .width(200)
  .height(200)
  .objectFit(ImageFit.None)
  .objectRepeat(ImageRepeat.X)   //X轴循环
  .border({width:1})

3.onComplete

图片数据加载成功或解码成功会触发该回调，返回成功加载图片的尺寸

Image("imgs/it.png").width(200)
  .onComplete((info)=>{
   // console.log(info)
    // 鸿蒙里console.log只能打印字符串，打印位置在编辑器日志里面
    console.log(JSON.stringify((info)))//把对象转成字符串
  })

onError

图片加载失败时执行，返还组件的宽和高及失败信息

Image("weg").width(200)
  .onError((info)=>{
    console.log(JSON.stringify((info)))
  })