在用户界面中使用图像

Image 组件用于在用户界面中添加多种支持格式的图像，包括 PNG 和 JPEG 等位图格式以及 SVG 等矢量图形格式。要在设计中使用任何图像文件，首先需要将它们添加到 "资产"（Assets）中：

1. 选择Assets > 。
2. 选择图像文件，然后选择Open 。
3. 在Add Resources 对话框中选择保存图像的位置。
4. 选择OK 。

您的图像现在可以在Assets 中找到。

当您将图像文件从Assets 拖动到Navigator 或2D 视图时，Qt Quick Designer 会自动为您创建一个图像组件实例，并将图像文件的路径设置为Properties 中Source 字段的值。

要使用支持的 URL 方案从 URL 加载图像，请在Source 字段中指定 URL。

您可以使用边框图像组件显示图像（如 PNG 文件）作为边框和背景。有关使用边框图像创建按钮的更多信息，请参阅创建可缩放按钮和边框。

如果需要显示 GIF 等动画图像，请使用动画图像组件。

图像大小

如果未指定图像Size ，则会自动使用源图像的大小。

默认情况下，显式设置组件的宽度和高度会导致图像按比例缩放至该尺寸。要改变这种行为，请设置Fill mode 字段的值。图像可以被拉伸、平铺或统一缩放至指定大小，也可以不进行裁剪。Pad 选项表示不转换图像。

选择Smooth 可在缩放或变换时平滑过滤图像。平滑滤波可提供更好的视觉质量，但在某些硬件上可能会比较慢。如果图像以自然尺寸显示，此属性不会对视觉或性能产生影响。

选择Mipmap 可在缩放或转换图像时使用 mipmap 过滤。与平滑滤波相比，mipmap 滤波在缩放时能提供更好的视觉质量，但在初始化图像和渲染时可能会产生性能代价。

如果图像应自动应用图像转换元数据（如 EXIF 方向），请选择Auto transform 。

源尺寸

Source size 属性指定全帧图像的缩放宽度和高度。与按比例绘制图像的Size 属性值不同，该属性为加载的图像设置了最大存储像素数，这样大型图像就不会占用超出必要的内存。这样可以确保内存中的图像不会大于设定的源大小，而不管其设定大小如何。

如果图像的实际尺寸大于源尺寸，图像将被缩放。如果只将尺寸的一个维度设置为大于 0，则会按比例设置另一个维度，以保持源图像的宽高比。Fill mode 与此无关。

如果同时设置了源尺寸的宽度和高度，则会缩小图像以适应指定尺寸，并保持图像的宽高比。但是，如果使用PreserveAspectCrop 或PreserveAspectFit ，则会对图像进行缩放，以符合裁剪或匹配的最佳尺寸。

如果源是本质上可缩放的图像（如 SVG），无论本质大小如何，源大小都会决定加载图像的大小。避免动态更改源大小属性，因为与渲染其他图像格式相比，渲染 SVG 的速度很慢。

如果源是不可缩放的图像（如 JPEG），加载的图像将不会大于源指定的大小。对于某些格式，整个图像实际上永远不会加载到内存中。

图像对齐

您可以在Alignment H 和Alignment V 字段中水平和垂直对齐图像。默认情况下，图像居中对齐。

选择Mirror 可水平反转图像，从而有效显示镜像图像。

性能

默认情况下，本地可用图像会立即加载，用户界面会被阻塞，直到加载完成。如果要加载大图像，最好在低优先级线程中加载图像，方法是选择Asynchronous 。如果图片是从网络而非本地资源获取的，则会自动以异步方式加载。

图像在内部缓存和共享，因此如果多个图像具有相同的Source ，则只会加载一个图像副本。

边框图像

Border Image 组件扩展了Image 组件的功能。它用于通过缩放或平铺每幅图像的部分内容来创建图像边框。源图像被分成 9 个区域，分别进行缩放或平铺。边角区域完全不缩放，而水平和垂直区域则根据Tile mode H 和Tile mode V 字段的值或两者的值缩放。

Stretch 选项缩放图像以适应可用区域。Repeat 选项对图像进行平铺，直到没有更多空间。为确保最后一幅图像不被裁剪，请选择Round 选项，该选项可在必要时缩放图像。

在Border left,Border right,Border top 和Border bottom 字段中指定图像的区域。这些区域描述了作为边框使用的源图像各边缘的距离。

有关使用边框图像的示例，请参阅BorderImage 组件的文档。

动画图像

Animated Image 组件扩展了图像组件的功能，提供了一种方法来播放以包含一系列帧的图像形式存储的动画，如存储在 GIF 文件中的动画。

在Speed 字段中设置动画的速度。速度以原始动画图像速度的百分比来衡量。默认速度为 1.0，即原始速度。

要播放动画，请选择Playing 。

要暂停动画，请选择 (Paused)。

选择Cache 时，动画的每一帧都会被缓存。如果要播放较长或较大的动画，并希望节省内存，请清除复选框。

如果图像数据来自顺序设备（如套接字），动画图像只能在启用缓存后才能循环播放。

更多信息，请观看以下视频：

图像组件概述

下表列出了可用于添加图像的组件。位置列包含可在Components 中找到该组件的选项卡名称。MCU 支持列表示 MCU 支持哪些组件。

图标	名称	位置	MCU 支持	用途
	Animated Image	默认组件 - 基本	无	存储包含一系列帧的动画的图像，如 GIF 文件中存储的动画。
	Border Image	默认组件 - 基本	是	用作边框或背景的图像。
	Image	默认组件 - 基本	是	支持格式之一的图像，包括 PNG 和 JPEG 等位图格式以及 SVG 等矢量图形格式。