QML中如何用图片实现进度条（避免图片拉伸变形）

要实现图片随进度逐步显示且不拉伸，核心是限制图片的显示区域，而非让图片填充整个进度矩形。可以通过裁剪容器+固定图片比例的方式实现，以下是可行代码：

ProgressBar {
    id: pb
    value: 50 // 示例进度值
    minimumValue: 0
    maximumValue: 100

    style: ProgressBarStyle {
        // 可选：自定义进度条背景样式
        background: Rectangle {
            color: "#e0e0e0"
            radius: 4
        }

        progress: Rectangle {
            // 开启裁剪，只显示对应进度宽度的区域
            clip: true
            // 动态计算进度宽度：总宽度 × 进度比例
            width: pb.width * (pb.value / pb.maximumValue)
            height: pb.height

            Image {
                source: "../icons/progress_full.png"
                // 保持图片原始比例，避免拉伸
                fillMode: Image.PreserveAspectFit
                // 让图片高度匹配进度条高度，宽度自动按比例适配
                height: parent.height
                // 若图片是横向进度样式，可设置水平对齐为左侧
                horizontalAlignment: Image.AlignLeft
            }
        }
    }
}

关键注意点 #

• 必须开启容器的clip: true属性，确保只显示当前进度对应的图片区域
• 动态计算容器宽度，绑定到进度的比例值，实现随进度逐步显示
• 给Image设置fillMode: Image.PreserveAspectFit，强制保持图片原始宽高比，避免拉伸变形

如果你的进度图片是需要从左到右逐步露出的横向样式，上述代码直接可用；若图片是其他方向，只需调整horizontalAlignment或verticalAlignment即可。

内容的提问来源于stack exchange，提问作者Hawke