C/C++ Qt Tree與Tab元件實現分頁選單

lyshark發表於2021-11-30
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,"設定選單");

// ----------------------------------------------------------
// https://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);
    }
}

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

相關文章