Image


Image

组件通过

source

属性显示指定图片的路径，支持位图格式（如

jpg

和

png

）和矢量图格式（如

svg

）。它可以来自于本地文件系统，也可以来自于网络图片。

下面是一个最简单的用法：

import QtQuick

Image {
    source: "img/logo.png"
}

使用

qmlscene

命令运行效果如下：

需要指出的是，在没有指定

Image

组件

width

和

height

属性的情况下，

Image

会使用其图片的原始宽高。如果指定了宽高，图片会自动进行缩放以适应其大小。

import QtQuick

Image {
    source: "img/logo.png"
    width: 200
    height: 100
}

可以看到图片产生了变形，想要改变这一行为，可以通过设置

fillMode

属性实现。

fillMode

是一个枚举类型，不同的枚举值对应着不同的效果：

• Image.Stretch – 默认值，缩放图片以填充指定大小。
  
• Image.PreserveAspectFit – 根据图片原始宽高比进行缩放，不做裁剪
  
  
• Image.PreserveAspectCrop – 根据图片原始宽高比进行缩放并裁剪
  
  
• Image.Tile – 图片在水平和垂直方向上进行平铺
  
  
• Image.TileVertically – 图片在垂直方向上进行平铺
  
  
• Image.TileHorizontally – 图片在水平方向上进行平铺
  
  
• Image.Pad – 图片既不缩放也不平铺
• 

对于

Image

组件的使用有以下几个需要注意的地方：

• 加载本地大图片，建议启用
  
asynchronous

  属性。它可以实现异步加载，防止界面卡顿。而对于网络图片，则会自动执行异步加载，并可以通过
  
progress

  属性获取加载的进度。
• QML的界面开发中，
  
Image

  组件通常是占用内存最大的，可以通过
  
sourceSize

  属性进行控制。
  
sourceSize

  的值越小占用内存越少，但是会影响图片的清晰度。
• 支持缓存与共享机制。如果有多个
  
Image

  组件具有相同的
  
source

  时，其他
  
Image

  组件将仅加载该图片的一个副本。
• 支持经过纹理压缩的图片文件，如
  
PKM

  、
  
KTX

  、
  
ASTC

  格式的图片，它依赖于GPU和驱动程序。使用它们可以提升程序运行的效率，常用于嵌入式设备。

获取更多信息，请关注作者公众号：

程序员练兵场