企业官网建设流程全解析

文字进度条把进度做进文字里——「LOADING」几个字按进度逐字渐变填充；「PROGRESS」几个字用渐变色填充进度部分；百分比数字用滚动数字效果像老式机械计数器翻页。这种形式在加载页、品牌化进度展示、数字仪表这类场景里很有特色，比普通进度条更有设计感。

Demo 文字进度条

三种文字进度条同屏排开：文字渐变（LOADING 按进度渐变填充）、滚动数字（三位数字滚动 + 百分号）、文字填充（PROGRESS 渐变填充），底部一根滑杆统一控制进度。

QML 用 Canvas 的clip配合fillText做文字裁剪填充，用 Column 的 y 偏移做滚动数字。涉及的核心知识点：

• 文字用矩形裁剪做渐变填充
• 灰色底色 + 渐变填充双层文字
• 滚动数字用 Column y 偏移
• SmoothedAnimation 平滑滚动
• 三色渐变跨越红橙绿
• measureText 测量文字宽度居中

以下演示代码来自qml_progress/Demo_TextBar.qml，为便于阅读，只展示了关键代码。

演示代码（文字