【VS Code 與 Qt6】QAction 類的一些事

QAction 類表示用戶命令的一種抽象,包括命令文本、圖標、命令觸發後要執行的代碼。菜單、工具欄按鈕往往存在相同的功能,將這些命令獨立抽出來,放到 QAction 以象上,可避免編寫重複的代碼。比如“文件”菜單下有“保存”命令,工具欄上也會有“保存”按鈕。因此,創建一個表示“保存”的 QAction 對象,同時添加到菜單和工具欄中,它們就能共享相同的功能。

以上F話了這麼多,就是爲了明確 QAction 類的作用。在創建 QAction 實例時,可以通過構造函數傳遞命令的文本,或圖標。如果在調用構造函數時不指定,那麼可以用下面這些方法來“補做”:

1、setText 方法:設置命令文本。顯示在用戶界面上的文本;

2、setIcon 方法:看名識義,就是設置圖標;

3、setFont 方法:在呈現命令文本時用的字體。一般不需要特意去指定字體,它會繼承應用程序的默認字體;

4、setShortcut:設置命令的快捷鍵。

QAction 類有個核心的信號:triggered,當用戶通過點擊或快捷鍵激活菜單項或工具欄按鈕,就會發出 triggered 信號。

 

下面咱們做個簡單的例子。這裏我用到了 QMainWindow 類來充當主窗口,因爲它的“窗口功能”比較完善,創建個菜單欄、工具欄和狀態欄的都比較方便。

CMake 文件:

cmake_minimum_required(VERSION 3.20)
# 項目
project(myApp VERSION 1.0.0 LANGUAGES CXX)
find_package(Qt6 REQUIRED COMPONENTS Gui Core Widgets)
# 開啓MOC
set(CMAKE_AUTOMOC ON)
# 語言標準
set(CMAKE_CXX_STANDARD 17)
set(CMAKE_CXX_STANDARD_REQUIRED ON)

# 源文件
add_executable(app WIN32 me.cpp)
target_link_libraries(app PRIVATE Qt6::Core Qt6::Gui Qt6::Widgets)

me.cpp 文件:

#include <QApplication>
#include <QMainWindow>
#include <QMenuBar>
#include <QMessageBox>
#include <QMenu>
#include <QAction>
#include <QIcon>

// 這三個逗丁用來接收信號的,slot 函數
void onNew();
void onSave();
void onExit();

int main(int argc, char** argv)
{
    QApplication app(argc,argv);
    // 創建主窗口
    QMainWindow win;
    // 窗口標題
    win.setWindowTitle("整活兒");
    // 這樣獲取,默認會創建空的菜單欄
    QMenuBar* menubar = win.menuBar();
    // 添加“文件”菜單
    QMenu* fileMenu = menubar -> addMenu("文件");
    // 創建三個QAction對象
    QAction *act1 = new QAction("新建", &win);
    QAction *act2 = new QAction("保存", &win);
    QAction *act3 = new QAction("退出", &win);
    // 連接triggered信號
    QObject::connect(act1, &QAction::triggered, &onNew);
    QObject::connect(act2, &QAction::triggered, &onSave);
    QObject::connect(act3, &QAction::triggered, &onExit);
    // 把三個action添加到菜單中
    fileMenu->addAction(act1);
    fileMenu->addAction(act2);
    fileMenu->addAction(act3);

    // 顯示主窗口
    win.show();
    // 進入事件循環
    return QApplication::exec();
}

void onNew()
{
    QMessageBox::information(nullptr, "提示", "新建文件");
}

void onSave()
{
    QMessageBox::information(nullptr, "提示", "保存文件");
}

void onExit()
{
    QApplication::exit();
}

QMainWindow 的 menuBar 方法用來獲取菜單欄(QMenuBar)引用的。但,當窗口中未設置過菜單欄時,它會自動創建一個空菜單欄,並將其引用返回。返回的 QMenu 對象表示菜單,調用它的 addAction 方法就能添加菜單項了。菜單項用 QAction 表示。

onNew、onSave、onExit 這三個函數分別作爲三個 QAction 對象的 slot 函數,接收 triggered 信號。

運行後,你會看到,QAction 對象指定的文本,會自動呈現在菜單文本中。

 

通常,爲了讓菜單命令更直觀,咱們會在重要的菜單項上加上圖標。接下來給上述三個 action 添上小圖標。這裏老周介紹一個獲取圖標的網站,很好用,要啥圖標,進去後直接搜索就行,而且可以選擇多尺寸下載。比那些要強制登錄才能用的騷站好很多。

瀏覽器打開 Download 1,301,500 free icons (SVG, PNG) (icons8.com)

菜單上的圖標,用 16×16 就夠了。把圖標文件放在與應用程序可執行文件相同的路徑下,依次命名爲 new.png、save.png、exit.png。

接着,改一下代碼,需要用 QAction 帶 QIcon 參數的構造函數。

QAction *act1 = new QAction(QIcon("new.png"), "新建", &win);
QAction *act2 = new QAction(QIcon("save.png"), "保存", &win);
QAction *act3 = new QAction(QIcon("exit.png"), "退出", &win);

再次編譯,運行,效果如下:

 

對於常用的命令,有快捷鍵能大大提升效率。快捷鍵需要用到 QKeySequence 類。該類在 QtGui 基礎模塊中。這個類在調用構造函數時有一種特特簡單的用法,就是直接用字符串來描述快捷鍵。這些字符要求是人類可讀性較高的。比如下面這些:

Ctrl+F               // Ctrl + F
Shift+H             // Shift+ H
Alt+W
Ctrl+Alt+E
F5           // 就是 F5    
D            // 就是字母D

給上面示例的三個菜單加上快捷鍵。

act1->setShortcut(QKeySequence("Ctrl+N"));
act2->setShortcut(QKeySequence("ctrl+S"));
act3->setShortcut(QKeySequence("Alt+E"));

描述按鍵的字符串不區分大小寫,所以,“Alt+E”和“alt+e”一樣。快捷鍵會顯示在菜單命令文本的右邊。如下所示

這時候,只要按下 Alt + E,程序就會退出。

 

應用程序除了菜單欄,通常還有工具欄(QToolBar)。QAction 類是命令的抽象,它可以在菜單欄與工具欄之間共用。所以,咱們上面的示例也可以加上工具欄。

// 創建三個QAction對象
QAction *act1 = new QAction(QIcon("new.png"), "新建", &win);
QAction *act2 = new QAction(QIcon("save.png"), "保存", &win);
QAction *act3 = new QAction(QIcon("exit.png"), "退出", &win);
……
// 創建工具欄
QToolBar *toolbar = new QToolBar(&win);
// 將那三個命令添加到工具欄
toolbar->addAction(act1);
toolbar->addAction(act2);
toolbar->addAction(act3);
// 工具欄添加到主窗口
win.addToolBar(toolbar);

重新編譯運行,結果如下:

 

QAction 的 triggered 信號是這樣定義的:

void QAction::triggered(bool checked = false)

它有個 bool 類型的參數,默認是 false。幹嗎用的呢?這是處理帶 check 功能的菜單用的。就是那種點一下 on,再點一下 off 的那種。咱們在上面的示例中增加一個“開機啓動”菜單項。

QAction *act4 = new QAction("開機啓動", &win);
// 開啓check功能
act4->setCheckable(true);

QObject::connect(act4, &QAction::triggered, &onAutoStart);
fileMenu->addAction(act4);

// 這個是slot函數
void onAutoStart(bool checked)
{
    if(checked){
        QMessageBox::information(nullptr,"提示", "程序開機啓動");
    }
    else
    {
        QMessageBox::information(nullptr,"提示","已取消開機啓動");
    }
}

setCheckable 方法如果傳遞 true,表示開啓 check 功能;若 false,關閉 check 功能。

當可check菜單處於 on 狀態時,它前面會顯示一個勾。如下圖所示:

 

有些時候,菜單命令的默認用戶界面不太符合需要。爲了方便用戶操作,我可能想放一個別的 Widget 上去(比如放個滑塊條)。QAction 類做不到這個,但它的派生類可以:QWidgetAction。

咱們在菜單欄上添加一個顯示 QSpinBox 組件的命令。

// 創建spinBox組件
QSpinBox *spinbox = new QSpinBox(&win);
spinbox->show();
// 設置一下範圍0-300
spinbox->setRange(0, 300);
// 默認顯示的值50
spinbox->setValue(50);
// 將它放到工具欄和菜單上
QWidgetAction *act5 = new QWidgetAction(&win);
act5->setDefaultWidget(spinbox);

fileMenu->addAction(act5);

QWidgetAction 在實例化後,調用 setDefaultWidget 方法關聯要顯示在菜單上的組件即可。當然,咱們可以從 QWidgetAction 類派生出自己的類,來實現更高級的需求。這個老周留到下次寫水文時再說。

編譯運行,看看菜單的最後一項,有趣吧。

 

==========================================================================

好了,今天的話題就聊完了。下面又是老周講故事時間。

以前老周分享過改 VS Code 全窗口背景的方法,就是設置 <body> 元素的背景圖,然後適當調一調透明度。

但,如果你不喜歡那樣覆蓋整個窗口,我只是想打開代碼編輯器時纔看到背景圖呢。嗯,也就是隻設置編輯器的背景圖。原理一樣,都是改 CSS 樣式。打開VS Code程序目錄下的 resources\app\out\vs\workbench\workbench.desktop.main.css 樣式表,添加以下樣式:

.monaco-editor, .monaco-editor-background {
  background: center/32% no-repeat url('vscode-file://vscode-app/c:/users/mmm/pictures/bg/20.png') !important;
}

對的,就是設置 background 屬性,後面的 important 表示強行覆蓋,不然不會生效。圖片URL 是 vscode-file 協議,加上 vscode-app 前綴,然後就是圖片的完整路徑。center/32% 表示圖片居中對齊,32% 是縮小圖片,變爲原尺寸的32%,這個你得根據你的圖片自己調,調到合適就好。

建議使用透明背景的 PNG 圖片,因爲太花的圖片會干擾你寫代碼的。CSS 不要用 opacity 來調整透明度,因爲這樣一調,連代碼的透明度也跟着變了,很影響視線,看不清代碼,容易導致高度近視。咱們可以在圖片上做手腳,就是讓原圖也具有一定的透明度。

方法是用 PS 打開圖片,在圖層面板的“不透明度”,改爲 15-20% ,具體哪個值你也可以試試,只要看着舒服就行。

設置完後,效果如下:

《初代萌王陪我寫代碼》,豈不美哉!

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章