C/C++ Qt ToolBar菜單組件的具體使用

更新時(shí)間：2021年11月25日 16:16:37 作者：lyshark

ToolBar工具欄在所有窗體應(yīng)用程序中都廣泛被使用，使用ToolBar可以很好的規(guī)范菜單功能分類，本文就詳細(xì)的介紹一下ToolBar組件的應(yīng)用，感興趣的可以了解一下

ToolBar工具欄在所有窗體應(yīng)用程序中都廣泛被使用，使用ToolBar可以很好的規(guī)范菜單功能分類，用戶可根據(jù)菜單欄來選擇不同的功能，Qt中默認(rèn)自帶ToolBar組件，當(dāng)我們以默認(rèn)方式創(chuàng)建窗體時(shí)，ToolBar就被加入到了窗體中，一般是以QToolBar的方式存在于對(duì)象菜單欄，如下所示。

QToolBar組件在開發(fā)中我遇到了以下這些功能，基本上可以應(yīng)對(duì)大部分開發(fā)需求了，這里就做一個(gè)總結(jié)。

頂部工具欄ToolBar組件的定義有多種方式,我們可以直接通過代碼生成,也可以使用圖形界面UI拖拽實(shí)現(xiàn),但使用代碼時(shí)間則更加靈活一些,ToolBar組件可以表現(xiàn)出多種形態(tài).

首先來看一個(gè)簡單的生成案例,如下代碼中我們通過屬性setAllowedAreas()可以實(shí)現(xiàn)將ToolBar組件放置到上下左右四個(gè)不同的方位上面.

#include "mainwindow.h"
#include "ui_mainwindow.h"

#include <iostream>
#include <QMenuBar>
#include <QToolBar>

MainWindow::MainWindow(QWidget *parent) :QMainWindow(parent),ui(new Ui::MainWindow)
{
    ui->setupUi(this);

// ----------------------------------------------------------
// 創(chuàng)建菜單欄
    QMenuBar *bar = menuBar();
    this->setMenuBar(bar);                      // 將菜單欄放入主窗口
    QMenu * fileMenu = bar->addMenu("文件");     // 創(chuàng)建父節(jié)點(diǎn)

    // 添加子菜單
    QAction *newAction = fileMenu->addAction("新建文件");     // 設(shè)置名字
    //newAction->setIcon(QIcon("://image/1.ico"));           // 設(shè)置可用圖標(biāo)

    fileMenu->addSeparator();                                // 添加分割線
    QAction *openAction = fileMenu->addAction("打開文件");     // 設(shè)置名字
    //openAction->setIcon(QIcon("://image/2.ico"));          // 設(shè)置可用圖標(biāo)

// ----------------------------------------------------------
//創(chuàng)建工具欄
    QToolBar *toolBar = new QToolBar(this);  // 創(chuàng)建工具欄
    addToolBar(Qt::LeftToolBarArea,toolBar); // 設(shè)置默認(rèn)停靠范圍 [默認(rèn)?？孔髠?cè)]

    toolBar->setAllowedAreas(Qt::TopToolBarArea |Qt::BottomToolBarArea);   // 允許上下拖動(dòng)
    toolBar->setAllowedAreas(Qt::LeftToolBarArea |Qt::RightToolBarArea);   // 允許左右拖動(dòng)

    toolBar->setFloatable(false);       // 設(shè)置是否浮動(dòng)
    toolBar->setMovable(false);         // 設(shè)置工具欄不允許移動(dòng)

    // 工具欄添加菜單項(xiàng)
    toolBar->addAction(newAction);
    toolBar->addSeparator();
    toolBar->addAction(openAction);

// By : LyShark
// https://www.cnblogs.com/lyshark
// ----------------------------------------------------------
// 綁定槽函數(shù)
    connect(newAction,&QAction::triggered,this,[=](){
        std::cout << "new action" << std::endl;
    });

    connect(openAction,&QAction::triggered,this,[=](){
        std::cout << "open action" << std::endl;
    });
}

MainWindow::~MainWindow()
{
    delete ui;
}

接著通過代碼的方式實(shí)現(xiàn)一個(gè)頂部菜單欄，該菜單欄中可以通過SetIcon(QIcon("://image/1.ico"));指定圖標(biāo)，也可以使用setShortcut(Qt::CTRL | Qt::Key_C);為其指定特殊的快捷鍵。

#include "mainwindow.h"
#include "ui_mainwindow.h"

#include <iostream>
#include <QMenuBar>
#include <QToolBar>

MainWindow::MainWindow(QWidget *parent) :QMainWindow(parent),ui(new Ui::MainWindow)
{
    ui->setupUi(this);

// ----------------------------------------------------------
// 創(chuàng)建菜單欄
    QMenuBar *bar = menuBar();
    this->setMenuBar(bar);  //將菜單欄放入主窗口
    QMenu * fileMenu = bar->addMenu("文件");

// By : LyShark
// https://www.cnblogs.com/lyshark
    // 添加子菜單
    QAction *newAction = fileMenu->addAction("新建文件");      // 添加名字
    newAction->setIcon(QIcon(":/image/1.ico"));              // 設(shè)置ICO圖標(biāo)
    newAction->setShortcut(Qt::CTRL | Qt::Key_A);            // 設(shè)置快捷鍵ctrl+a

    fileMenu->addSeparator();                                // 添加分割線

    QAction *openAction = fileMenu->addAction("打開文件");
    openAction->setIcon(QIcon(":/image/2.ico"));
    openAction->setShortcut(Qt::CTRL | Qt::Key_C);          // 設(shè)置快捷鍵ctrl+c

// ----------------------------------------------------------
// 創(chuàng)建工具欄(可屏蔽掉,屏蔽掉后底部將失去控件欄位)

    QToolBar *toolBar = new QToolBar(this);       // 創(chuàng)建工具欄
    addToolBar(Qt::BottomToolBarArea,toolBar);    // 設(shè)置默認(rèn)停靠范圍(?？吭诘撞?
    toolBar->setFloatable(false);                 // 設(shè)置是否浮動(dòng)為假
    toolBar->setMovable(false);                   // 設(shè)置工具欄不允許移動(dòng)

    // 工具欄添加菜單項(xiàng)
    toolBar->addAction(newAction);               // 工具欄添加[新建文件]
    toolBar->addSeparator();                     // 添加分割線
    toolBar->addAction(openAction);              // 添加[打開文件]

// ----------------------------------------------------------
// 綁定信號(hào)和槽
   connect(newAction,&QAction::triggered,this,[=](){
       std::cout << "new file slot" << std::endl;
   });

   connect(openAction,&QAction::triggered,this,[=](){
       std::cout << "open file slot" << std::endl;
   });
}

MainWindow::~MainWindow()
{
    delete ui;
}

實(shí)現(xiàn)頂部菜單欄二級(jí)菜單，二級(jí)頂部菜單與一級(jí)菜單完全一致，只是在一級(jí)菜單的基礎(chǔ)上進(jìn)行了延申，如下代碼則是定義了一個(gè)二級(jí)菜單。

#include "mainwindow.h"
#include "ui_mainwindow.h"

#include <iostream>
#include <QMenuBar>
#include <QToolBar>

MainWindow::MainWindow(QWidget *parent) :QMainWindow(parent),ui(new Ui::MainWindow)
{
    ui->setupUi(this);

// ----------------------------------------------------------
// 多層菜單導(dǎo)航欄
       QMenuBar *MainMenu = new QMenuBar(this);
       this->setMenuBar(MainMenu);

       // 1.定義父級(jí)菜單
       QMenu *EditMenu = MainMenu->addMenu("編輯");

       // 1.1 定義 EditMemu 下面的子菜單
       QAction *text = new QAction(EditMenu);
       text->setText("編輯文件");                     // 設(shè)置文本內(nèi)容
       text->setShortcut(Qt::CTRL | Qt::Key_A);      // 設(shè)置快捷鍵ctrl+a
       text->setIcon(QIcon(":/image/1.ico"));        // 增加圖標(biāo)
       EditMenu->addAction(text);

       EditMenu->addSeparator();                      // 在配置模式與編輯文件之間增加虛線

       QAction *option = new QAction(EditMenu);
       option->setText("配置模式");
       option->setIcon(QIcon(":/image/2.ico"));
       EditMenu->addAction(option);

       // 1.1.2 定義Option配置模式下的子菜單
       QMenu *childMenu = new QMenu();
       QAction *set_file = new QAction(childMenu);
       set_file->setText("設(shè)置文件內(nèi)容");
       set_file->setIcon(QIcon(":/image/3.ico"));

       childMenu->addAction(set_file);

       QAction *read_file = new QAction(childMenu);
       read_file->setText("讀取文件內(nèi)容");
       read_file->setIcon(QIcon(":/image/2.ico"));
       childMenu->addAction(read_file);
// ----------------------------------------------------------
// 注冊菜單到窗體中
// By : LyShark
// https://www.cnblogs.com/lyshark

       // 首先將childMenu注冊到option中
       option->setMenu(childMenu);
       // 然后再將childMenu加入到EditMenu中
       EditMenu->addMenu(childMenu);

// ----------------------------------------------------------
// 綁定信號(hào)和槽
       connect(text,&QAction::triggered,this,[=](){
           std::cout << "edit file slot" << std::endl;
       });

       connect(set_file,&QAction::triggered,this,[=](){
           std::cout << "set file slot" << std::endl;
       });

       connect(read_file,&QAction::triggered,this,[=](){
          std::cout << "read file slot" << std::endl;
       });
}

MainWindow::~MainWindow()
{
    delete ui;
}

Qt中的菜單還可以實(shí)現(xiàn)任意位置的彈出，例如我們可以將右擊customContextMenuRequested()事件，綁定到主窗口中，實(shí)現(xiàn)在窗體任意位置右擊都可以彈出菜單欄，代碼如下。

#include "mainwindow.h"
#include "ui_mainwindow.h"

#include <QMenuBar>
#include <iostream>

MainWindow::MainWindow(QWidget *parent) :QMainWindow(parent),ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    this->setContextMenuPolicy(Qt::CustomContextMenu);
}

MainWindow::~MainWindow()
{
    delete ui;
}

// 在主界面右擊->轉(zhuǎn)到customContextMenuRequested槽
// By : LyShark
// https://www.cnblogs.com/lyshark
void MainWindow::on_MainWindow_customContextMenuRequested(const QPoint &pos)
{
    // 創(chuàng)建菜單對(duì)象
    QMenu *pMenu = new QMenu(this);

    QAction *pNewTask = new QAction(tr("新建"), this);
    QAction *pEditTask = new QAction(tr("編輯"), this);
    QAction *pDeleteTask = new QAction(tr("刪除"), this);

    // 設(shè)置屬性值編號(hào): 1=>新建 2=>設(shè)置 3=>刪除
    pNewTask->setData(1);
    pEditTask->setData(2);
    pDeleteTask ->setData(3);

    // 把QAction對(duì)象添加到菜單上
    pMenu->addAction(pNewTask);
    pMenu->addAction(pEditTask);
    pMenu->addAction(pDeleteTask);

    // 增加圖標(biāo)
    pNewTask->setIcon(QIcon(":/image/1.ico"));
    pEditTask->setIcon(QIcon(":/image/2.ico"));
    pDeleteTask->setIcon(QIcon(":/image/3.ico"));

    // 連接鼠標(biāo)右鍵點(diǎn)擊信號(hào)
    connect(pNewTask, SIGNAL(triggered()), this, SLOT(onTaskBoxContextMenuEvent()));
    connect(pEditTask, SIGNAL(triggered()), this, SLOT(onTaskBoxContextMenuEvent()));
    connect(pDeleteTask, SIGNAL(triggered()), SLOT(onTaskBoxContextMenuEvent()));

    // 在鼠標(biāo)右鍵點(diǎn)擊的地方顯示菜單
    pMenu->exec(QCursor::pos());

    //釋放內(nèi)存
    QList<QAction*> list = pMenu->actions();
    foreach (QAction* pAction, list) delete pAction;
    delete pMenu;
}

// 處理發(fā)送過來的信號(hào)
void MainWindow::onTaskBoxContextMenuEvent()
{
    // this->sender()就是信號(hào)發(fā)送者 QAction
    QAction *pEven = qobject_cast<QAction *>(this->sender());

    // 獲取編號(hào): 1=>新建 2=>設(shè)置 3=>刪除
    int iType = pEven->data().toInt();

    switch (iType)
    {
    case 1:
        std::cout << "新建任務(wù)" << std::endl;
        break;
    case 2:
        std::cout << "設(shè)置任務(wù)" << std::endl;
        break;
    case 3:
        std::cout << "刪除任務(wù)" << std::endl;
        break;
    default:
        break;
    }
}

還可以將頂部的菜單通過bar->setVisible(false);屬性將其隱藏起來，對(duì)外只展示出一個(gè)ToolBar控件欄位，ToolBar控件欄中只保留ICO圖標(biāo)與底部文字描述，這樣能顯得更加清爽一些。

#include "mainwindow.h"
#include "ui_mainwindow.h"

#include <QMenuBar>
#include <QToolBar>
#include <iostream>

MainWindow::MainWindow(QWidget *parent) :QMainWindow(parent),ui(new Ui::MainWindow)
{
    ui->setupUi(this);

// ----------------------------------------------------------
    // 隱藏菜單欄上的右擊菜單
    this->setContextMenuPolicy(Qt::NoContextMenu);

    // 創(chuàng)建基礎(chǔ)頂部菜單并讓其隱藏
    QMenuBar *bar = menuBar();
    this->setMenuBar(bar);
    QMenu * fileMenu = bar->addMenu("Ptr");
    bar->setVisible(false);                 // 隱藏菜單

    // 添加子菜單
    QAction *NewAction = fileMenu->addAction("新建文件");
    QAction *OpenAction = fileMenu->addAction("打開文件");
    QAction *ReadAction = fileMenu->addAction("讀入文件");

    // 分別設(shè)置圖標(biāo)
    NewAction->setIcon(QIcon(":/image/1.ico"));
    OpenAction->setIcon(QIcon(":/image/2.ico"));
    ReadAction->setIcon(QIcon(":/image/3.ico"));

    // 創(chuàng)建工具欄
    QToolBar *toolBar = new QToolBar(this);
    addToolBar(Qt::TopToolBarArea,toolBar);

    // 將菜單項(xiàng)依次添加到工具欄
    toolBar->addAction(NewAction);
    toolBar->addAction(OpenAction);
    toolBar->addAction(ReadAction);

    // 設(shè)置禁止移動(dòng)屬性,工具欄默認(rèn)貼在上方
    toolBar->setFloatable(false);
    toolBar->setMovable(false);
    toolBar->setToolButtonStyle(Qt::ToolButtonTextUnderIcon);

// ----------------------------------------------------------
// 綁定槽函數(shù)
// By : LyShark
// https://www.cnblogs.com/lyshark
    connect(NewAction,&QAction::triggered,this,[=](){
        std::cout << "new action" << std::endl;
    });

    connect(OpenAction,&QAction::triggered,this,[=](){
        std::cout << "open action" << std::endl;
    });

    connect(ReadAction,&QAction::triggered,this,[=](){
        std::cout << "read action" << std::endl;
    });
}

MainWindow::~MainWindow()
{
    delete ui;
}