0
点赞
收藏
分享

微信扫一扫

QML之Image组件

RockYoungTalk 2022-01-08 阅读 83
css前端

Image

Image组件通过source属性显示指定图片的路径,支持位图格式(如jpgpng)和矢量图格式(如svg)。它可以来自于本地文件系统,也可以来自于网络图片。

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

import QtQuick

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

使用qmlscene命令运行效果如下:

 

需要指出的是,在没有指定Image组件widthheight属性的情况下,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组件将仅加载该图片的一个副本。
  • 支持经过纹理压缩的图片文件,如PKMKTXASTC格式的图片,它依赖于GPU和驱动程序。使用它们可以提升程序运行的效率,常用于嵌入式设备。

 

举报

相关推荐

0 条评论