尧图网站设计 尧图网站设计YAOTU DESIGN
ARTICLE DETAIL

资讯详情

深耕网站设计与一线实操的经验洞察。

QML Action 共享复用与快捷键:一个动作多处触发

QML Action 共享复用与快捷键:一个动作多处触发 目录共享复用演示代码关键逻辑解析快捷键触发演示代码关键逻辑解析运行验证小结写 QML 界面时常见一个麻烦同一个功能工具栏放个按钮菜单里放一项有时界面上还要再放一个。逻辑完全一样却要写三遍改的时候还容易漏。Action 就是干这个的——把保存定义成一份谁要展示谁引用文字、图标、快捷键、触发逻辑统一管理。下面两个 demo一个是Action的共享复用一个是快捷键触发。共享复用界面上一行三个控件Button、ToolButton还有一个打开菜单的入口菜单里有个 MenuItem——它们全部指向同一个保存动作。点哪个都触发同一份逻辑计数一起累加。下面的勾选框控制整个动作的启用/禁用三个控件同步变灰或恢复。演示代码import QtQuick import QtQuick.Controls import QtQuick.Layouts FadeInAnimation { // 计数Action 被触发次数Button / ToolButton / MenuItem 共享同一个 Action property int triggerCount: 0 ColumnLayout { anchors.fill: parent anchors.margins: 20 spacing: 15 // ... 省略标题组件 TitleSeparator ... // 唯一的 Action 定义所有控件引用它 Action { id: saveAction text: 保存 icon.name: document-save shortcut: CtrlS onTriggered: { triggerCount textResult.text Action 触发 triggerCount 次来源不限 } } // 三个不同控件共享同一个 Action RowLayout { Layout.alignment: Qt.AlignHCenter spacing: 12 Button { action: saveAction Layout.preferredHeight: 40 } ToolButton { action: saveAction Layout.preferredHeight: 40 } ToolButton { text: 打开菜单 Layout.preferredHeight: 40 onClicked: sharedMenu.open() Menu { id: sharedMenu MenuItem { action: saveAction } // 菜单项同样复用 Action MenuSeparator {} MenuItem { text: 占位项无 Action; enabled: false } } } } // 启用/禁用 Action所有绑定控件同步变化 CheckBox { id: enableCheck Layout.alignment: Qt.AlignHCenter text: Action.enabled (checked ? true : false) checked: true onCheckedChanged: saveAction.enabled checked } Text { id: textResult Layout.fillWidth: true color: #1296FF font.pointSize: 11 text: 尚未触发 } Text { Layout.fillWidth: true color: #999 font.pointSize: 11 wrapMode: Text.Wrap text: 提示上方三个控件共用同一 Action任一控件点击或按 CtrlS 都会触发同一逻辑 } Item { Layout.fillHeight: true } } }关键逻辑解析Action 本身不是控件Action 不占界面位置、不可见它只描述一件事显示什么文字、用什么图标、配哪个快捷键、触发后做什么。真正把它画出来的是引用了它的控件。三处共享同一个 Action代码里每处都写action: saveAction——Button、ToolButton、MenuItem 指向同一个对象。它们的文字、图标、点击行为全部来自这一份。改文字只改一处加图标也只加一处。触发逻辑只写一次onTriggered整份代码只出现一次。不管从按钮、工具按钮、菜单项还是快捷键触发都走同一段逻辑triggerCount 累加底部文字刷新。启用禁用同步勾选框控制的是saveAction.enabled一个属性切换后三个控件一起灰掉或恢复不会出现按钮能点、菜单却灰了的情况。快捷键触发三个 Action 各配一个快捷键——CtrlN 新建、CtrlS 保存、CtrlP 打印。按钮排成一行旁边一个文件菜单把三个动作收进去。这个 demo 的重点是不用点鼠标直接按键盘就能触发而且菜单项右侧会自动显示快捷键。演示代码import QtQuick import QtQuick.Controls import QtQuick.Layouts FadeInAnimation { ColumnLayout { anchors.fill: parent anchors.margins: 20 spacing: 15 // ... 省略标题组件 TitleSeparator ... // 一组带快捷键的 Action逻辑统一维护 Action { id: newAction; text: 新建; shortcut: CtrlN; onTriggered: show(新建) } Action { id: saveAction; text: 保存; shortcut: CtrlS; onTriggered: show(保存) } Action { id: printAction; text: 打印; shortcut: CtrlP; onTriggered: show(打印) } RowLayout { Layout.alignment: Qt.AlignHCenter spacing: 12 Button { action: newAction; Layout.preferredHeight: 36 } Button { action: saveAction; Layout.preferredHeight: 36 } Button { action: printAction; Layout.preferredHeight: 36 } ToolButton { text: 文件菜单 Layout.preferredHeight: 36 onClicked: fileMenu.open() Menu { id: fileMenu MenuItem { action: newAction } MenuItem { action: saveAction } MenuItem { action: printAction } } } } Text { id: tip Layout.fillWidth: true color: #1296FF font.pointSize: 11 text: } Text { Layout.fillWidth: true color: #999 font.pointSize: 11 text: 提示请直接按 CtrlN / CtrlS / CtrlP } Item { Layout.fillHeight: true } } function show(name) { tip.text 已触发 name } }关键逻辑解析shortcut 属性给 Action 写shortcut: CtrlNQML 自动监听这个组合键焦点在哪都能触发。不用自己写按键监听也不用关心窗口是否激活。快捷键跟着动作走不是跟着某个控件走。菜单项自动显示快捷键MenuItem 引用了带快捷键的 Action右侧会自动显示 CtrlN 这样的提示。在 Action 上配好就行不用手动拼字符串。按钮和菜单背后还是那三个 Action三个按钮加三个菜单项六个入口背后还是三个 Action。触发逻辑写在onTriggered里点按钮和选菜单走同一条路。show函数三个 Action 共用收到哪个就显示哪句话。共享复用和快捷键经常一起出现工具栏、菜单、界面按钮指向同一个功能时用共享复用高频操作不想摸鼠标时配快捷键。运行验证Qt Creator 打开示例的 CMakeLists.txt按 CtrlR 运行共享复用依次点按钮、工具按钮、菜单项看计数累加取消勾选看三个控件一起变灰快捷键不点任何控件直接按 CtrlN / CtrlS / CtrlP看底部提示文字变化。小结把常用功能做成 Action工具栏、右键菜单、快捷键都引用同一份一处改动处处生效。看到多个按钮逻辑一模一样时先想想能不能抽成 Action。需要把一组互斥动作统一管理时可以在此基础上引入 ActionGroup。已验证环境Qt 版本Qt 6.11.1操作系统Windows 11项目地址QML 示例合集V2.0 - qml_action_button_group
返回列表