C/C++ Qt MdiArea 多窗體元件應用

lyshark發表於2021-11-30
C++QT元件

MDI多窗體元件，主要用於設計多文件介面應用程式，該元件具備有多種窗體展示風格，其實現了在父窗體中內嵌多種子窗體的功能，使用MDI元件需要在UI介面中增加mdiArea控制元件容器，我們所有的窗體建立與操作都在這個容器內進行，如下我們將具體介紹該元件的常用使用技巧。

MDI窗體控制元件類似於畫布，該控制元件只具備展示窗體的功能，無法實現生成窗體，所以我們需要在專案中手動增加自定義的Dialog對話方塊，並對該對話方塊進行一定的定製。

這個Dialog對話方塊我們只增加兩個功能，一個Dialog::currentFileName()獲取窗體標題，另一個Dialog::SetData(QString data)設定資料到編輯框，程式碼實現如下.

#include "dialog.h"
#include "ui_dialog.h"

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

    this->setWindowTitle("New Doc <By: LyShark >");           // 視窗標題
    this->setAttribute(Qt::WA_DeleteOnClose);  // 關閉時自動刪除
    this->setFixedSize(200,100);               // 設定窗體大小
    // this->setWindowIcon(QIcon(":/image/1.ico"));
}

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

// 獲取窗體標題
// By: LyShark
QString Dialog::currentFileName()
{
    QString title = this->windowTitle();
    return title;
}

// 設定編輯框內容
// https://www.cnblogs.com/lyshark
void Dialog::SetData(QString data)
{
    ui->lineEdit->setText(data);
}

接著我們開始繪製這個程式的主介面，在toolBar中增加相應的選單欄，並在主窗體中放入mdiArea容器元件。

窗體中的頂部選單欄，我們需要手動定義一下他們所具備的功能名稱等。

當程式啟動後，程式呼叫MainWindow初始化這個窗體，初始化程式碼如下:

#include "mainwindow.h"
#include "ui_mainwindow.h"
#include "dialog.h"
#include <iostream>
#include <QCloseEvent>

// 如果直接關閉,則清空所有對話方塊
// https://www.cnblogs.com/lyshark
void MainWindow::closeEvent(QCloseEvent *event)
{
    ui->mdiArea->closeAllSubWindows();
    event->accept();
}

// By: LyShark
MainWindow::MainWindow(QWidget *parent) :QMainWindow(parent),ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    this->setCentralWidget(ui->mdiArea);
    //this->setWindowState(Qt::WindowMaximized); //視窗最大化顯示
    ui->mainToolBar->setToolButtonStyle(Qt::ToolButtonTextUnderIcon);
    ui->mdiArea->setViewMode(QMdiArea::SubWindowView); //子視窗模式
}

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

程式碼執行效果如下:

使用者新建窗體執行MainWindow::on_actionOpen_triggered()事件，關閉窗體時則執行MainWindow::on_actionClose_triggered()事件。

// 新建窗體
void MainWindow::on_actionOpen_triggered()
{
    Dialog *formDoc = new Dialog(this); //
    ui->mdiArea->addSubWindow(formDoc); //文件視窗新增到MDI
    formDoc->show(); //在單獨的視窗中顯示
}
// 關閉全部
void MainWindow::on_actionClose_triggered()
{
    ui->mdiArea->closeAllSubWindows(); //關閉所有子視窗
}

程式碼執行效果如下:

當使用者點選MDI模式時，我們則執行以下程式碼，將所有已存在的窗體合併為一個類似於TabWidget的窗體元件。

// 轉為MID模式
void MainWindow::on_actionMID_triggered(bool checked)
{
    // Tab多頁顯示模式
    if (checked)
    {
        ui->mdiArea->setViewMode(QMdiArea::TabbedView); // Tab多頁顯示模式
        ui->mdiArea->setTabsClosable(true);             // 頁面可關閉
        ui->actionLine->setEnabled(false);
        ui->actionTile->setEnabled(false);
    }
    // 子視窗模式
    else
    {
        ui->mdiArea->setViewMode(QMdiArea::SubWindowView); // 子視窗模式
        ui->actionLine->setEnabled(true);
        ui->actionTile->setEnabled(true);
    }
}

程式碼執行效果如下:

窗體級聯模式則是將窗體並排排列在一起，我們只需要呼叫ui->mdiArea->cascadeSubWindows();方法即可實現.

// 級聯模式
void MainWindow::on_actionLine_triggered()
{
    ui->mdiArea->cascadeSubWindows();
}

程式碼執行效果如下:

平鋪模式同樣使用ui->mdiArea->tileSubWindows();即可實現轉換。

// 平鋪模式
void MainWindow::on_actionTile_triggered()
{
    ui->mdiArea->tileSubWindows();
}

程式碼執行效果如下:

最後一個功能是主窗體傳送資料到子窗體，該功能的實現需要兩個函式。

  • on_mdiArea_subWindowActivated 實現設定主窗體名字到自身
  • on_actionSendMsg_triggered 實現主窗體傳送訊息到子窗體內
// 當子窗體開啟時獲取到其窗體標題
// By: LyShark
void MainWindow::on_mdiArea_subWindowActivated(QMdiSubWindow *arg1)
{
    Q_UNUSED(arg1);

    // 若子視窗個數為零,則將statusBar置空
    if (ui->mdiArea->subWindowList().count()==0)
    {
        ui->statusBar->clearMessage();
    }
    else
    {
        // 如果不為0則顯示主視窗的檔名
        Dialog *formDoc=static_cast<Dialog*>(ui->mdiArea->activeSubWindow()->widget());
        ui->statusBar->showMessage(formDoc->currentFileName());
    }
}

// 對選中窗體傳送資料
// https://www.cnblogs.com/lyshark
void MainWindow::on_actionSendMsg_triggered()
{
    // 先獲取當前MDI子視窗
    Dialog *formDoc;

    // 如果開啟則獲取活動窗體
    if (ui->mdiArea->subWindowList().count() > 0)
    {
        formDoc=(Dialog*)ui->mdiArea->activeSubWindow()->widget();
        // 對活動窗體設定資料
        formDoc->SetData("hello lyshark");
    }
}

程式碼執行效果如下:

相關文章