MenuBar: display shortcut in QuickControls2
-
Hi,
I have a menu bar which looks like this:
menuBar: MenuBar { id: mainmenu Menu { title: qsTr("&File") Action { text: qsTr("&Open...") shortcut: StandardKey.Open onTriggered: { fileDialog.visible=true } } } Menu { title: qsTr("&View") Action { id: fullscreenAction checkable: true checked: false text: qsTr("&Fullscreen") shortcut: Shortcut { sequences: [StandardKey.FullScreen,"F12"] onActivated: { fullscreenAction.toggle() } }
If I press Alt+F The File Menu expands. Is it possible to show the Keyboard shortcut next to the text (in the case of file open Ctrl+O)?
-
Hi @maxwell31
- Please have a look at MenuItem which has a shortcut property.
- You can provide action to the MenuItem
Example:
import QtQuick 2.9 import QtQuick.Window 2.0 import QtQuick.Controls 1.4 ApplicationWindow { visible: true width: 640 height: 480 menuBar: MenuBar { Menu { title: "File" MenuItem { text: "Open"; shortcut: "Ctrl+O"; } MenuItem { shortcut: "Ctrl+Q" text: 'Close'; action: Action { shortcut: StandardKey.Quit onTriggered: { Qt.quit(); } } } } Menu { title: "Edit" MenuItem { text: "Cut"; shortcut: "Ctrl+X" } MenuItem { text: "Copy"; shortcut: "Ctrl+C" } MenuItem { text: "Paste"; shortcut: "Ctrl+V" } } } }
All the best
-
@maxwell31
you can customize your MenuItem
https://doc.qt.io/qt-5/qtquickcontrols2-customize.htmlTherefore, (untested)
MenuItem { id:menuItem contentItem: Item { Text { leftPadding: menuItem.indicator.width rightPadding: menuItem.arrow.width text: menuItem.text font: menuItem.font opacity: enabled ? 1.0 : 0.3 color: menuItem.highlighted ? "#ffffff" : "#21be2b" horizontalAlignment: Text.AlignLeft verticalAlignment: Text.AlignVCenter } Text{ //the shortcut leftPadding: menuItem.indicator.width rightPadding: menuItem.arrow.width text: "STRG + Q" font: menuItem.font opacity: enabled ? 1.0 : 0.3 color: menuItem.highlighted ? "#ffffff" : "#21be2b" horizontalAlignment: Text.AlignRight verticalAlignment: Text.AlignVCenter } } }
-
Thank you! Yes this will work. Do you know a way how to get the text corresponding to something like StandardKey.Fullscreen? It will be a cross platform application, therefore I don't want to hardcode the text.
With e.g. StandardKey.Quit.toString() I can get the enum value, but how to get the string in qml?
-
@maxwell31 I'm afraid not,
you can decide the text on the OS, currently running.
text: { if(Qt.platform.os == "windows") return "STRG + Q" else if( Qt.platform.os == "osx") return "⌘ + Q" }
-
Elaborating on the answers provided so far, I came up with the following solution:
Create a QML file named CustomMenuItem.qml with the following code:
import QtQuick 2.12 import QtQuick.Layouts 1.12 import QtQuick.Controls 2.12 MenuItem { id: root property alias sequence: _shortcut.sequence property bool indicatorVisible: root.icon.source.length > 0 || root.checkable Shortcut { id: _shortcut enabled: root.enabled onActivated: root.triggered() } contentItem: RowLayout { spacing: 0 width: root.width opacity: root.enabled ? 1 : 0.5 Item { width: root.indicatorVisible ? root.indicator.width + 4 : 0 } Label { text: root.text Layout.fillWidth: true elide: Label.ElideRight verticalAlignment: Qt.AlignVCenter } Item { Layout.fillWidth: true } Label { text: _shortcut.nativeText verticalAlignment: Qt.AlignVCenter } } }
You can now use this item in your MenuBar as follows:
MenuBar { Menu { title: qsTr("File") CustomMenuItem { sequence: StandardKey.Open text: qsTr("Select JSON file") + "..." } // Rest of code... (which I still haven't done) } }
Screenshot: