QML ProgressBar 基础用法：默认样式与平滑动画

进度条是界面里最常用的反馈元素：下载、上传、安装、加载，没有它用户心里没底。QML 里做进度条特别省事，ProgressBar 组件拿来就能用。这篇讲两个最基础的用法：直接用默认样式，以及给进度加平滑动画。

默认样式 --- 原生 ProgressBar，一个 value 属性搞定
进度动画 --- 进度变化时平滑过渡，配合定时器自动跑起来

Demo 1：默认样式

一个最朴素的 ProgressBar，通过 value 设置进度，下面实时显示当前值。

演示代码

qml 复制代码

import QtQuick
import QtQuick.Controls
import QtQuick.Controls.Basic
import QtQuick.Layouts

FadeInAnimation {
    ColumnLayout {
        anchors.fill: parent
        anchors.margins: 20
        spacing: 15

        // ... 省略标题组件 TitleSeparator ...

        ProgressBar {
            id: control
            Layout.fillWidth: true
            height: 24
            value: 0.6
        }

        Text {
            text: "进度值: " + control.value
            font.pointSize: 11
            color: "#666"
        }

        Item { Layout.fillHeight: true }
    }
}

关键逻辑解析

ProgressBar 的核心只有一个属性：value，取值 0 到 1。0 是空，1 是满，0.6 就是走了六成。它还有 from / to 可以自定义范围（这篇不展开，下一篇的动画 demo 里会用）。

进度条本身不用管颜色、不用管宽窄，全是默认样式。开发时先拿它把逻辑跑通，最后再考虑外观------这正是上一篇说的"先能用，再好看"的顺序。

下面一行 Text 直接显示 control.value，方便调试时观察进度变化。实际项目里一般显示成百分比，后面矩形自定义那个 demo 里会看到怎么算。

Demo 2：进度动画

默认的进度条跳变很生硬，真实场景里进度是平滑涨上去的。这个 demo 给进度条加了两个东西：宽度变化时的过渡动画，以及一个定时器模拟"后台任务在推进"。

演示代码

qml 复制代码

import QtQuick
import QtQuick.Controls
import QtQuick.Controls.Basic
import QtQuick.Layouts

FadeInAnimation {
    ColumnLayout {
        anchors.fill: parent
        anchors.margins: 20
        spacing: 15

        // ... 省略标题组件 TitleSeparator ...

        ProgressBar {
            id: control
            Layout.fillWidth: true
            height: 24

            from: 0
            to: 100
            value: 30

            background: Rectangle {
                color: "#eee"
                border.color: "#ccc"
                border.width: 1.5
                radius: 4
            }

            contentItem: Item {
                anchors.margins: 4
                Rectangle {
                    width: control.visualPosition * parent.width
                    height: parent.height
                    radius: 4
                    clip: true

                    // 蓝→青渐变填充，让动画中的进度更有层次
                    gradient: Gradient {
                        GradientStop { position: 0.0; color: "#4facfe" }
                        GradientStop { position: 1.0; color: "#00f2fe" }
                    }

                    // 顶部高光：模拟光泽感
                    Rectangle {
                        anchors { left: parent.left; right: parent.right; top: parent.top }
                        height: parent.height / 3
                        color: "white"
                        opacity: 0.25
                    }

                    Behavior on width {
                        NumberAnimation { duration: 500 }  // 添加宽度变化的动画效果
                    }
                }
            }
        }

        Timer {
            id: timer
            interval: 1000
            running: true
            repeat: true
            onTriggered: {
                if (control.value < control.to) {
                    control.value += 10;
                } else {
                    control.value = 30;
                }
            }
        }

        Text {
            text: "进度值: " + control.value
            font.pointSize: 11
            color: "#666"
        }

        Item { Layout.fillHeight: true }
    }
}

关键逻辑解析

这个 demo 里最核心的是 Behavior on width：

qml 复制代码

Behavior on width {
    NumberAnimation { duration: 500 }
}

Behavior 给属性装了一层"过渡器"：width 变化时先播一小段动画，而不是直接跳到新值。没有它，进度是"啪"地一下跳过去；有了它，才是平滑地"涨"过去。进度条动画基本都是这个套路。

进度条拆成了两部分来定制：background 是底（浅灰、圆角、描边），contentItem 是填充部分。填充宽度用的是 control.visualPosition------ProgressBar 内部会把 value 按 from/to 范围换算成 0~1 的位置，拿它乘上总宽度就是当前填充的宽度，比自己换算省事。

填充做了点小美化：蓝到青的渐变，顶部再叠一条半透明白色高光，滚动的时候有光泽感。clip: true 是防止渐变和高光溢出圆角。

进度来源是那个 Timer：每隔一秒把 value 加 10，到顶（100）之后跳回 30 重新开始，模拟一个"任务反复执行"的过程。真实项目里把这个定时器换成后台任务的进度回调，就是标准的进度条用法了。

对比表格

场景	用哪个 demo	关键点
快速演示、先跑通逻辑	默认样式	只有 `value` 一个属性
进度需要平滑过渡	进度动画	`Behavior on width`
自定义底和填充	进度动画	`background` + `contentItem`

运行验证

用 Qt Creator 打开 qml_progressbar/CMakeLists.txt；
按 Ctrl+R 运行；
先看默认样式的静态进度，再切到进度动画，观察平滑增长到顶后回落的循环。

扩展复用方向

把 value 绑定到实际任务进度（比如文件传输的字节数、图片加载的完成度），就是真实可用的进度条。
渐变的两端颜色换成品牌色，进度条就跟整体风格统一了。
想让进度条"倒着跑"，把 from/to 反过来就行。

已验证环境：

Qt 版本：Qt 6.8.2 / Qt 6.11.1
操作系统：Windows 11
GitHub：QML-Minimal-Demos/qml_progressbar