3. 使用Image组件显示图片

任务目标

在QML中加载并显示本地图片，掌握Image组件的核心属性，并能够通过设置fillMode控制图片的缩放与填充行为。

环境准备

本案例基于Qt 5.15+或Qt 6.x，需要Qt Quick模块。在项目文件（.pro）中确保包含：

QT += quick
CONFIG += c++11

准备一张本地测试图片（如photo.jpg），放置在与QML文件相同的目录下，或使用资源文件（qrc）路径。

关键完整代码

创建一个main.qml文件，完整代码如下：

import QtQuick 2.15
import QtQuick.Window 2.15

Window {
    width: 400
    height: 400
    visible: true
    title: "Image 组件示例"

    // 原始图片尺寸假设为 200x200，窗口为 400x400
    Image {
        id: myImage
        source: "photo.jpg"   // 本地图片路径，或 "qrc:/photo.jpg"
        width: 300
        height: 300
        anchors.centerIn: parent

        // fillMode 可选值：
        // Image.Stretch（默认，拉伸填满）
        // Image.PreserveAspectFit（保持比例，完整显示）
        // Image.PreserveAspectCrop（保持比例，裁剪填满）
        // Image.Tile（平铺）
        // Image.TileVertically / Image.TileHorizontally
        fillMode: Image.PreserveAspectFit

        // 显示当前填充模式（便于观察效果）
        Rectangle {
            anchors.bottom: parent.bottom
            anchors.horizontalCenter: parent.horizontalCenter
            width: parent.width
            height: 30
            color: "#AA000000"
            Text {
                anchors.centerIn: parent
                color: "white"
                text: "fillMode: " + myImage.fillMode
            }
        }
    }

    // 点击切换填充模式，便于对比
    MouseArea {
        anchors.fill: parent
        onClicked: {
            if (myImage.fillMode === Image.PreserveAspectFit)
                myImage.fillMode = Image.PreserveAspectCrop
            else if (myImage.fillMode === Image.PreserveAspectCrop)
                myImage.fillMode = Image.Stretch
            else
                myImage.fillMode = Image.PreserveAspectFit
        }
    }
}

运行与验证

运行方式：在Qt Creator中打开项目，直接运行qml文件（或通过qmlscene main.qml命令）。

验证步骤：

1. 程序启动后，窗口中央显示图片，底部有黑色半透明标签显示当前fillMode值。
2. 点击窗口任意位置，观察图片显示方式变化：
   • PreserveAspectFit：图片完整显示，保持原始宽高比，可能留有空白。
   • PreserveAspectCrop：图片填满整个Image区域，超出部分被裁剪，保持比例。
   • Stretch：图片被拉伸至完全填满Image区域，比例可能失真。
3. 若图片未显示，检查source路径是否正确，或改用资源文件路径（qrc:/... ）。

通过条件：三种填充模式均能正常切换，且图片显示行为与上述描述一致，无控制台报错。

关键说明

• Image的width和height决定显示区域大小，与图片原始尺寸无关。
• 若不设置width/height，Image默认按图片原始尺寸显示。
• source支持本地文件路径、资源路径（qrc:/）及网络URL（需额外配置）。
• 实际项目中建议将图片放入.qrc资源文件，避免路径问题。