PyQt6+QML消息通知栏Canvas箭头与倒计时移除

脚本专家

PyQt6 负责应用生命周期和 QML 引擎加载，QML 负责界面渲染与交互。原文的入口文件 main.py 使用 QGuiApplication 和 QQmlApplicationEngine，通过 os.path 定位同目录 main.qml，再用 QUrl.fromLocalFile 加载；如果 engine.rootObjects() 为空，就向 stderr 输出“错误：无法加载 QML 文件”并 sys.exit(-1)。这种写法避免依赖当前工作目录，适合把 main.py、main.qml 放在同一工程目录。

2. import sys
3. import os
4. from PyQt6.QtCore import QUrl
5. from PyQt6.QtGui import QGuiApplication
6. from PyQt6.QtQml import QQmlApplicationEngine
8. def main():
9.     app = QGuiApplication(sys.argv)
10.     engine = QQmlApplicationEngine()
11.     qml_path = os.path.join(os.path.dirname(os.path.abspath(__file__)), "main.qml")
12.     engine.load(QUrl.fromLocalFile(qml_path))
13.     if not engine.rootObjects():
14.         print("错误：无法加载 QML 文件", file=sys.stderr)
15.         sys.exit(-1)
16.     sys.exit(app.exec())
18. if __name__ == "__main__":
19.     main()

复制代码

消息栏的数据源是 QML 内置 ListModel。每条消息有 id、text、type、remaining、duration 五个字段：id 用于按消息定位删除，type 取 info=0、warning=1、error=2，remaining 是剩余存活毫秒数，duration 是总存活时间。初始示例追加三条 5000ms 消息。addMessage(text, type, durationMs=5000) 会先自增 msgCounter，生成新 id，再把 remaining 和 duration 都设为 durationMs；closeMessage(msgId) 遍历模型，按 id 调用 messagesModel.remove(i) 删除。进度条不单独存储，而是由 remaining/duration 实时计算。

视觉映射通过 QtObject 定义只读常量，再用 getColor(type)、getProgressColor(type)、getIcon(type) 三个函数完成类型到样式的转换：info 主色 #3b82f6、进度色 #bfdbfe、图标 💡；warning 主色 #f59e0b、进度色 #fde68a、图标 ⚡；error 主色 #ef4444、进度色 #fecaca、图标 ❌。默认分支回落到 info 的配色和图标。增加新类型时，需要同步扩展常量和这几个映射函数，避免在 delegate 中散落 if/else。

每个消息项用 Canvas 绘制箭头丝带。画布宽度为 parent.width+12，高度与消息项一致，右侧多出的 12px 用于箭头尖角。绘制路径依次为：左上角 (12,0)、右上角 (width-12,0)、右侧中点 (width,height/2)、右下角 (width-12,height)、左下角 (12,height)、左侧中点 (24,height/2)，最后 closePath 闭合；填充使用 getColor(msgType)，描边使用半透明白色 #ffffff30，线宽 1。进度条是叠加在 Canvas 内的 Rectangle，x 为 24，y 为 parent.height - height - 3，宽度为 (parent.width - 48) * progress，高度 2，颜色取 getProgressColor(msgType)。左侧内凹、右侧外凸配合 ListView 的 spacing: -10，形成相邻消息箭头咬合的重叠效果。

ListView 使用 Horizontal 方向，delegate 宽 160，锚点边距 8，footer 留 12px 宽度补偿最后一个箭头的延伸。消息增加后监听 onCountChanged，用 Qt.callLater(function(){ positionViewAtEnd() }) 延迟滚动到最右侧，确保新消息出现后可见。delegate 内的 MouseArea 铺满消息项，cursorShape 设为 PointingHandCursor，onClicked 调用 closeMessage(msgId)，实现点击关闭。

倒计时使用一个共享 Timer 统一驱动：interval 为 100，repeat 为 true，running 为 true，triggeredOnStart 为 true。每次触发遍历 messagesModel，用 newRemaining = msg.remaining - 100 计算新值；如果 newRemaining <= 0，就把当前下标放入 toRemove；否则调用 messagesModel.setProperty(i, "remaining", newRemaining)。遍历结束后，对 toRemove 从后往前删除，避免正序删除导致索引错位。

2. Timer {
3.     id: countdownTimer
4.     interval: 100
5.     repeat: true
6.     running: true
7.     triggeredOnStart: true
8.     onTriggered: {
9.         var toRemove = []
10.         for (var i = 0; i < messagesModel.count; i++) {
11.             var msg = messagesModel.get(i)
12.             var newRemaining = msg.remaining - 100
13.             if (newRemaining <= 0) {
14.                 toRemove.push(i)
15.             } else {
16.                 messagesModel.setProperty(i, "remaining", newRemaining)
17.             }
18.         }
19.         for (var j = toRemove.length - 1; j >= 0; j--) {
20.             messagesModel.remove(toRemove[j])
21.         }
22.     }
23. }

复制代码

这段逻辑的关键是“先收集后删除”和“倒序删除”：遍历时不能边删边改下标，否则后续元素位置会变化；倒序 remove 可以保证待删除位置之前的索引仍有效。由于所有消息共享一个 100ms 定时器，批量递减和批量清理的开销较小，也避免为每条消息单独创建定时器。

交互部分由三个按钮分别调用 addMessage(信息提示文本, messageType.info)、addMessage(警告提示文本, messageType.warning)、addMessage(故障提示文本, messageType.error)，默认 durationMs 为 5000。整个实现可以归纳为：ListModel 作为唯一数据源，delegate 只负责渲染；Canvas 定制普通控件不易实现的箭头丝带；Timer 统一驱动倒计时和自动移除。原文依赖 PyQt6 的 QtQml 与 QML 的 QtQuick、QtQuick.Window、QtQuick.Controls、QtQuick.Layouts 模块，未额外给出安装命令，实际运行时应以原文工程所需的 PyQt6/QML 环境为准。