企业官网建设流程全解析

缓冲进度条模拟视频播放器的「缓冲 + 播放」双进度——前面是缓冲进度（灰色或半透明），后面是播放进度（实色），播放进度不能超过缓冲进度。视频进度条则是无缓冲版本的纯播放控制。这两种形式在视频播放、流媒体加载、文件下载这类场景里是标准交互。本篇把播放控制条抽成一个公共组件PlayerControlBar，BufferBar 和 VideoBar 都基于它，避免重复代码。

Demo 缓冲进度条

顶部是 PlayerControlBar 组件（播放按钮 + 进度轨道 + 时间显示），进度轨道上能看到浅灰缓冲层在前、青色播放层在后；底部一根滑杆调节缓冲进度，演示缓冲和播放的联动。

涉及的核心知识点：

• 公共组件 PlayerControlBar 的接口设计
• 播放进度和缓冲进度双层叠加
• 缓冲上限限制播放进度
• Timer 驱动每秒前进
• 播放头拖动跳转
• 信号 toggleRequested 和 seekRequested

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