图片加载

Image {
    id: img
    anchors.fill: parent
    source: "qrc:/images/bg01.png"
    fillMode: Image.PreserveAspectCrop
    smooth: true
}

smooth: true 是一个控制图像缩放时是否启用平滑处理的属性，其作用如下：

启用平滑缩放（smooth: true）：

当图像需要被缩放（放大或缩小）以适应 Image 组件的显示区域时，会使用抗锯齿算法对图像边缘进行平滑处理，使缩放后的图像看起来更清晰、过渡更自然，减少像素化（锯齿状边缘）现象。

适合对图像显示质量要求较高的场景（如照片、图标等需要清晰呈现的内容）。
禁用平滑缩放（smooth: false，默认值）：

缩放时使用快速缩放算法，不进行抗锯齿处理，可能导致图像边缘出现明显锯齿，但缩放速度更快，性能消耗更低。

适合对性能要求较高（如大量图像快速渲染）或故意需要像素风格的场景。

填充方式

fillMode 属性用于指定图像如何适应其显示区域（即 Image 组件的大小），可选值及说明如下：

Image.Stretch

说明：拉伸图像，使其完全填充 Image 组件的显示区域，不保持图像原有的宽高比。可能导致图像变形。
Image.PreserveAspectFit（默认值）

说明：保持图像的宽高比，缩放图像使其完全适应 Image 组件的显示区域（图像完全在区域内，可能留有空白）。
Image.PreserveAspectCrop

说明：保持图像的宽高比，缩放图像使其填满 Image 组件的显示区域，超出区域的部分会被裁剪（图像完全覆盖区域，可能裁剪边缘）。
Image.Tile

说明：不缩放图像，以平铺（重复排列）的方式填充 Image 组件的显示区域，图像大小保持原始尺寸。
Image.TileVertically

说明：水平方向拉伸图像以适应组件宽度，垂直方向以平铺方式重复图像（保持原始高度）。
Image.TileHorizontally

说明：垂直方向拉伸图像以适应组件高度，水平方向以平铺方式重复图像（保持原始宽度）。
Image.Pad

说明：不缩放图像，保持原始尺寸显示。如果图像小于 Image 组件，空白区域会被填充（不拉伸、不平铺）；如果图像大于组件，超出部分会被裁剪。

图片圆角

图片如果需要圆角，建议是图片自身就带圆角。

import QtQuick
import QtQuick.Controls
import QtQuick.Effects

Image {
    id: img
    anchors.fill: parent
    source: "qrc:/images/bg01.png"
    fillMode: Image.PreserveAspectCrop
    smooth: true
    layer.enabled: true // 供效果系统采样
    layer.effect: MultiEffect {
        maskEnabled: true
        maskSource: maskSrc // 圆角遮罩纹理
    }
}
// 遮罩源：必须是带 alpha 的纹理，尺寸与图片一致
ShaderEffectSource {
    id: maskSrc
    sourceItem: maskRect
    hideSource: true // 不显示原矩形
    live: true // 实时更新
}

Rectangle {
    id: maskRect
    width: img.width
    height: img.height
    radius: 10
}

注意下面这种方式设置圆角是无效的

Rectangle {
    id: container
    anchors.fill: parent
    radius: 20
    clip: true

    Image {
        id: img
        anchors.fill: parent
        source: "qrc:/images/bg01.png"
        fillMode: Image.PreserveAspectCrop
    }
}

Rectangle的圆角只对自己的背景生效，clip: true也只是剪裁矩形区域，不能剪裁圆角。

我是码客，我是全栈工程师，我为自己代言。

Qt6 Quick QML中图片(Image)设置

图片加载

填充方式

图片圆角