在用户界面中使用图片

Image 组件用于将多种受支持格式的图像添加到UI中，包括位图格式（如PNG和JPEG）以及矢量图形格式（如SVG）。要在设计中使用任何图像文件，您需要先将其添加到“资源”中：

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

现在，您的图像已在“Assets ”中可用。

当您将图像文件从“Assets ”拖动到“Navigator ”或“2D ”视图时，Qt Quick Designer 会自动为您创建一个 Image 组件的实例，并将图像文件的路径设置为“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 组件扩展了 Image 组件的功能，提供了一种播放以包含一系列帧的图像形式存储的动画的方法，例如存储在 GIF 文件中的动画。

在“Speed ”字段中设置动画速度。速度以原始动画图像速度的百分比为单位。默认速度为 1.0，即原始速度。

要播放动画，请选择“Playing ”。

要暂停动画，请选中“ ”（Paused ）。

选中“Cache ”后，动画的每一帧都会被缓存。若您正在播放较长或较大的动画且希望节省内存，请取消选中该复选框。

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

如需了解更多信息，请观看以下视频：

图像组件概览

下表列出了可用于添加图像的组件。“位置”列包含在Components 中查找该组件的选项卡名称。“MCU支持”列标明了哪些组件在MCU上受支持。

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