C/C++ Qt Tree與Tab組件實現分頁菜單

• 2021 年 11 月 30 日
• 筆記
• C/C++ Qt 圖形化開發筆記

雖然TreeWidget組件可以實現多節點的增刪改查，但多節點操作顯然很麻煩，在一般的應用場景中基本上只使用一層結構即可解決大部分開發問題，TreeWidget組件通常可配合TabWidget組件，實現一個類似於樹形菜單欄的功能，當用戶點擊菜單欄中的選項時則會跳轉到不同的頁面上。

首先在Qt的Ui編輯界面左側加入TreeWidget組件，右側加入TabWidget組件，將頁面中的TabWidget組件增加指定頁，效果如下。

在MainWindow::MainWindow主函數中我們對其中的兩個組件進行初始化操作。

#include "mainwindow.h"
#include "ui_mainwindow.h"
#include <QStyleFactory>

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

    ui->treeWidget->setColumnCount(1);
    ui->treeWidget->setHeaderHidden(true);
    ui->tabWidget->tabBar()->hide();
    // 增加線條
    ui->treeWidget->setStyle(QStyleFactory::create("windows"));

// ----------------------------------------------------------
// By: LyShark
    // 創建 [系統設置] 父節點
    QTreeWidgetItem *system_setup = new QTreeWidgetItem(ui->treeWidget,QStringList(QString("系統位置")));
    system_setup->setFlags(Qt::ItemIsSelectable | Qt::ItemIsUserCheckable | Qt::ItemIsEnabled | Qt::ItemIsAutoTristate);

    // 給父節點添加子節點
    QTreeWidgetItem *system_setup_child_node_1 = new QTreeWidgetItem(system_setup);
    system_setup_child_node_1->setText(0,"修改密碼");
    QTreeWidgetItem *system_setup_child_node_2 = new QTreeWidgetItem(system_setup);
    system_setup_child_node_2->setText(0,"設置菜單");

// ----------------------------------------------------------
// //www.cnblogs.com/lyshark
    // 創建 [頁面布局] 父節點
    QTreeWidgetItem *page_layout = new QTreeWidgetItem(ui->treeWidget,QStringList(QString("頁面布局")));
    page_layout->setFlags(Qt::ItemIsSelectable | Qt::ItemIsUserCheckable | Qt::ItemIsEnabled | Qt::ItemIsAutoTristate);

    QTreeWidgetItem *page_layout_clild_1 = new QTreeWidgetItem(page_layout);
    page_layout_clild_1->setText(0,"頁面配置");
    QTreeWidgetItem *page_layout_clild_2 = new QTreeWidgetItem(page_layout);
    page_layout_clild_2->setText(0,"頁面參數");

    ui->treeWidget->expandAll();
}

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

接着增加TreeWidget組件的右鍵點擊事件，當右鍵點擊節點時，先判斷節點是哪一個，並自動將TabWidget組件切換到指定的頁上。

// 當treeWidget空間雙擊後根據不同的菜單項選擇不同的TabView頁
void MainWindow::on_treeWidget_itemDoubleClicked(QTreeWidgetItem *item, int column)
{
    QString str = item->text(column);

    if(str == "修改密碼")
    {
        ui->tabWidget->setCurrentIndex(0);
    }
    if(str == "設置菜單")
    {
        ui->tabWidget->setCurrentIndex(1);
    }
    if(str == "頁面配置")
    {
        ui->tabWidget->setCurrentIndex(2);
    }
    if(str == "頁面參數")
    {
        ui->tabWidget->setCurrentIndex(3);
    }
}

代碼實現起來很簡單，具體實現效果如下所示: