Qt中Tab與Tree組件實現分頁菜單

更新時間：2023年12月18日 12:01:10 作者：微軟技術分享

本文主要介紹tabWidget選擇夾組件與TreeWidget樹形選擇組件的常用方法及靈活運用,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧

Qt 是一個跨平臺C++圖形界面開發(fā)庫，利用Qt可以快速開發(fā)跨平臺窗體應用程序，在Qt中我們可以通過拖拽的方式將不同組件放到指定的位置，實現圖形化開發(fā)極大的方便了開發(fā)效率，本章將重點介紹tabWidget選擇夾組件與TreeWidget樹形選擇組件的常用方法及靈活運用。

1.1 TabWidget

QTabWidget 是 Qt 中的一個用于顯示多個頁面的小部件，其中每個頁面通常包含不同的內容。每個頁面與一個標簽相關聯(lián)，用戶可以通過點擊標簽來切換不同的頁面。QTabWidget 是一個常見的用戶界面元素，用于組織和展示具有層次結構的信息。

以下是關于 QTabWidget 的主要特點和用法：

主要特點

多頁顯示： QTabWidget 允許在同一窗口中顯示多個頁面，每個頁面由一個標簽頁表示。
標簽頁： 每個頁面都有一個與之相關聯(lián)的標簽，通常是一個文本標簽或包含圖標的標簽，用于顯示頁面的名稱或標識。
切換頁面： 用戶可以通過點擊標簽頁來切換顯示不同的頁面，使得只有一個頁面處于可見狀態(tài)。
自定義標簽頁： QTabWidget 允許通過添加小部件（如按鈕、文本框等）作為標簽頁，以定制標簽頁的外觀和功能。

以下是 QTabWidget 類的一些常用方法的說明和概述，以表格形式列出：

方法	描述
`QTabWidget(QWidget *parent = nullptr)`	構造函數，創(chuàng)建一個 `QTabWidget` 對象。
`addTab(QWidget *widget, const QString &label)`	向 `QTabWidget` 添加一個標簽頁，并關聯(lián)一個小部件。
`insertTab(int index, QWidget *widget, const QString &label)`	在指定位置插入一個標簽頁，并關聯(lián)一個小部件。
`removeTab(int index)`	移除指定位置的標簽頁。
`clear()`	移除所有的標簽頁。
`setCurrentIndex(int index)`	設置當前顯示的標簽頁的索引。
`currentIndex()`	獲取當前顯示的標簽頁的索引。
`count()`	獲取標簽頁的數量。
`widget(int index)`	獲取指定索引處的標簽頁關聯(lián)的小部件。
`tabText(int index)`	獲取指定索引處的標簽頁的文本。
`setTabText(int index, const QString &text)`	設置指定索引處的標簽頁的文本。
`tabIcon(int index)`	獲取指定索引處的標簽頁的圖標。
`setTabIcon(int index, const QIcon &icon)`	設置指定索引處的標簽頁的圖標。
`tabBar()`	返回 `QTabBar` 對象，允許對標簽欄進行更高級的操作。
`tabBar()->setTabButton(int index, QTabBar::ButtonPosition position, QWidget *widget)`	在指定位置添加一個小部件按鈕到標簽頁。
`setTabEnabled(int index, bool enable)`	啟用或禁用指定索引處的標簽頁。
`isTabEnabled(int index)`	檢查指定索引處的標簽頁是否啟用。
`setTabToolTip(int index, const QString &tip)`	設置指定索引處的標簽頁的工具提示。
`tabToolTip(int index)`	獲取指定索引處的標簽頁的工具提示。
`setTabWhatsThis(int index, const QString &text)`	設置指定索引處的標簽頁的 What’s This 文本。
`tabWhatsThis(int index)`	獲取指定索引處的標簽頁的 What’s This 文本。
`currentChanged(int index)`	當前標簽頁發(fā)生變化時發(fā)出的信號，連接到槽函數以執(zhí)行相應的操作。
`tabCloseRequested(int index)`	用戶請求關閉標簽頁時發(fā)出的信號，連接到槽函數以執(zhí)行相應的操作。

這些方法提供了對 QTabWidget 進行標簽頁管理、屬性設置以及與標簽頁交互的控制。你可以根據具體需求使用這些方法，定制 QTabWidget 的外觀和行為。

與其他通用組件不同，TabWidget 組件只能通過在頁面中添加，當需要增加新的子菜單時，可以通過右鍵組件選中插入頁，在當前之后插入，這里我們分別增加四個子夾，此處只需要增加不需要重命名。

針對子夾的美化也很簡單，只需要調用setTab系列函數即可，需要注意的是，調用這些函數其中第一個參數均為子選擇夾的下標索引值，該索引值默認是從0開始計數的，完整代碼如下所示；

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

    // 全局配置tabWidget選項卡
    ui->tabWidget->setTabPosition(QTabWidget::North);       // 設置選項卡方位
    ui->tabWidget->setIconSize(QSize(50, 25));              // 設置圖標整體大小
    ui->tabWidget->setTabShape(QTabWidget::Triangular);     // 設置選項卡形狀
    ui->tabWidget->setMovable(true);                        // 設置選項卡是否可拖動
    ui->tabWidget->usesScrollButtons();                     // 選項卡滾動

    // 設置選項卡1
    ui->tabWidget->setTabText(0,QString("進制轉換標簽"));           // 設置選項卡文本
    ui->tabWidget->setTabIcon(0,QIcon(":/image/about.ico"));      // 設置選項卡圖標
    ui->tabWidget->setTabToolTip(0,QString("SpinBox 與進制轉換"));  // 設置鼠標懸停提示

    // 設置選項卡2
    ui->tabWidget->setTabText(1,QString("顏色配置標簽"));          // 設置選項卡文本
    ui->tabWidget->setTabIcon(1,QIcon(":/image/file.ico"));      // 設置選項卡圖標
    ui->tabWidget->setTabToolTip(1,QString("滑塊條的使用"));       // 設置鼠標懸停提示

    // 設置選項卡3
    ui->tabWidget->setTabText(2,QString("系統(tǒng)配置標簽"));          // 設置選項卡文本
    ui->tabWidget->setTabIcon(2,QIcon(":/image/lock.ico"));      // 設置選項卡圖標
    ui->tabWidget->setTabToolTip(2,QString("圓形組件與數碼表"));    // 設置鼠標懸停提示

    // 設置選項卡4
    ui->tabWidget->setTabText(3,QString("文件配置標簽"));          // 設置選項卡文本
    ui->tabWidget->setTabIcon(3,QIcon(":/image/lock.ico"));      // 設置選項卡圖標
    ui->tabWidget->setTabToolTip(3,QString("文件配置組合"));       // 設置鼠標懸停提示
}

該組件常用于分頁操作，以讓應用程序可以在一個頁面中容納更多的子頁面，如下圖我們分別創(chuàng)建了四個選擇夾，并實現了分頁展示的效果；

1.2 TreeWidget

QTreeWidget 是 Qt 中的一個用于顯示樹形結構的小部件。它允許用戶通過展開和折疊樹節(jié)點來查看和管理層次化的數據。每個節(jié)點可以包含子節(jié)點，形成一個樹狀結構。QTreeWidget 繼承自 QTreeWidget，提供了更高級的樹狀結構顯示功能。

以下是關于 QTreeWidget 的主要特點和用法：

主要特點

樹形結構： QTreeWidget 支持顯示樹形結構，每個節(jié)點可以包含子節(jié)點，形成一個層次化的樹。
列顯示： 可以在每個節(jié)點下顯示多列數據，每列可以包含不同的信息，這使得 QTreeWidget 可以用于顯示表格型數據。
編輯節(jié)點： 用戶可以編輯節(jié)點的數據，允許動態(tài)修改樹的內容。
選擇和操作： 提供了豐富的選擇和操作功能，用戶可以通過鍵盤或鼠標進行節(jié)點的選擇、展開和折疊等操作。
信號與槽： QTreeWidget 發(fā)送各種信號，如 itemClicked、itemDoubleClicked 等，以便在用戶與樹交互時執(zhí)行相應的操作。

以下是 QTreeWidget 類的一些常用方法的說明和概述，以表格形式列出：

方法	描述
`QTreeWidget(QWidget *parent = nullptr)`	構造函數，創(chuàng)建一個 `QTreeWidget` 對象。
`addTopLevelItem(QTreeWidgetItem *item)`	向樹中添加一個頂級項。
`insertTopLevelItem(int index, QTreeWidgetItem *item)`	在指定位置插入一個頂級項。
`takeTopLevelItem(int index)`	移除并返回指定位置的頂級項。
`clear()`	移除所有的項。
`topLevelItemCount()`	獲取頂級項的數量。
`topLevelItem(int index)`	獲取指定位置的頂級項。
`invisibleRootItem()`	獲取樹的不可見根項。
`setCurrentItem(QTreeWidgetItem *item)`	設置當前項。
`currentItem()`	獲取當前項。
`setItemWidget(QTreeWidgetItem item, int column, QWidget widget)`	在指定項和列上設置一個小部件。
`itemWidget(QTreeWidgetItem *item, int column)`	獲取指定項和列上的小部件。
`editItem(QTreeWidgetItem *item, int column)`	編輯指定項和列的數據。
`closePersistentEditor(QTreeWidgetItem *item, int column)`	關閉指定項和列上的持久編輯器。
`collapseItem(QTreeWidgetItem *item)`	折疊指定項。
`expandItem(QTreeWidgetItem *item)`	展開指定項。
`isItemExpanded(QTreeWidgetItem *item)`	檢查指定項是否展開。
`setItemExpanded(QTreeWidgetItem *item, bool expand)`	設置指定項的展開狀態(tài)。
`scrollToItem(QTreeWidgetItem *item, QAbstractItemView::ScrollHint hint = EnsureVisible)`	滾動視圖以確保指定項可見。
`setItemHidden(QTreeWidgetItem *item, bool hide)`	設置指定項的隱藏狀態(tài)。
`isItemHidden(QTreeWidgetItem *item)`	檢查指定項是否隱藏。
`setItemDisabled(QTreeWidgetItem *item, bool disable)`	設置指定項的禁用狀態(tài)。
`isItemDisabled(QTreeWidgetItem *item)`	檢查指定項是否禁用。
`setItemSelected(QTreeWidgetItem *item, bool select)`	設置指定項的選擇狀態(tài)。
`isItemSelected(QTreeWidgetItem *item)`	檢查指定項是否被選擇。
`itemAt(const QPoint &p)`	返回在指定位置的項。
`indexOfTopLevelItem(QTreeWidgetItem *item)`	獲取指定頂級項的索引。
`clearSelection()`	清除所有選定的項。
`sortItems(int column, Qt::SortOrder order = Qt::AscendingOrder)`	根據指定列的數據對項進行排序。
`headerItem()`	獲取樹的標題項。
`setHeaderItem(QTreeWidgetItem *item)`	設置樹的標題項。
`header()`	獲取樹的標題。
`setHeaderLabel(const QString &label)`	設置樹的標題。
`headerItem()`	獲取樹的標題項。
`setHeaderItem(QTreeWidgetItem *item)`	設置樹的標題項。
`header()`	獲取樹的標題。
`setHeaderLabel(const QString &label)`	設置樹的標題。
`setSortingEnabled(bool enable)`	啟用或禁用樹的排序功能。
`isSortingEnabled()`	檢查樹的排序功能是否啟用。
`sortColumn()`	獲取當前排序的列。
`sortOrder()`	獲取當前排序的順序。
`sortByColumn(int column, Qt::SortOrder order)`	根據指定列的數據對項進行排序。
`currentChanged(QTreeWidgetItem current, QTreeWidgetItem previous)`	當前項發(fā)生變化時發(fā)出的信號，連接到槽函數以執(zhí)行相應的操作。
`itemClicked(QTreeWidgetItem *item, int column)`	項被點擊時發(fā)出的信號，連接到槽函數以執(zhí)行相應的操作。
`itemDoubleClicked(QTreeWidgetItem *item, int column)`	項被雙擊時發(fā)出的信號，連接到槽函數以執(zhí)行相應的操作。
`itemPressed(QTreeWidgetItem *item, int column)`	項被按下時發(fā)出的信號，連接到槽函數以執(zhí)行相應的操作。
`itemActivated(QTreeWidgetItem *item, int column)`	項被激活時發(fā)出的信號，連接到槽函數以執(zhí)行相應的操作。
`itemCollapsed(QTreeWidgetItem *item)`	項被折疊時發(fā)出的信號，連接到槽函數以執(zhí)行相應的操作。
`itemExpanded(QTreeWidgetItem *item)`	項被展開時發(fā)出的信號，連接到槽函數以執(zhí)行相應的操作。
`itemChanged(QTreeWidgetItem *item, int column)`	項的數據發(fā)生變化時發(fā)出的信號，連接到槽函數以執(zhí)行相應的操作。
`itemSelectionChanged()`	選定項發(fā)生變化時發(fā)出的信號，連接到槽函數以執(zhí)行相應的操作。

這些方法提供了對 QTreeWidget 進行樹節(jié)點管理、屬性設置以及與樹節(jié)點交互的控制。你可以根據具體需求使用這些方法，定制 QTreeWidget 的外觀和行為。

雖然TreeWidget組件可以實現多節(jié)點的增刪改查功能，但在一般的應用場景中基本上只使用一層結構即可解決大部分開發(fā)需求，TreeWidget組件通常可配合TabWidget組件實現類似于樹形菜單欄的功能，當用戶點擊菜單欄中的選項時則會跳轉到不同的頁面上。

首先在Qt的UI編輯界面左側加入TreeWidget組件，右側加入TabWidget組件，將頁面中的TabWidget組件增加指定頁，整體頁面布局如下所示；

要實現對頁面的美化只需要在代碼中進行調整，在MainWindow::MainWindow主函數中我們對其中的兩個組件進行初始化操作，并通過setText設置標簽名，通過setIcon設置圖標組，最后通過expandAll執(zhí)行刷新到頁面，其核心代碼如下所示；

#include <iostream>
#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);

    // 隱藏tabWidget頭部
    ui->tabWidget->tabBar()->hide();

    // 為treeWidget增加線條
    ui->treeWidget->setStyle(QStyleFactory::create("windows"));

    // ----------------------------------------------------------
    // 創(chuàng)建 [系統(tǒng)設置] 父節(jié)點
    // ----------------------------------------------------------
    QTreeWidgetItem *system_setup = new QTreeWidgetItem(ui->treeWidget,QStringList(QString("系統(tǒng)位置")));
    system_setup->setFlags(Qt::ItemIsSelectable | Qt::ItemIsUserCheckable | Qt::ItemIsEnabled | Qt::ItemIsAutoTristate);
    system_setup->setIcon(0,QIcon(":/image/lock.ico"));

    // 給父節(jié)點添加子節(jié)點
    QTreeWidgetItem *system_setup_child_node_1 = new QTreeWidgetItem(system_setup);
    system_setup_child_node_1->setText(0,"修改密碼");
    system_setup_child_node_1->setIcon(0,QIcon(":/image/about.ico"));

    QTreeWidgetItem *system_setup_child_node_2 = new QTreeWidgetItem(system_setup);
    system_setup_child_node_2->setText(0,"設置菜單");
    system_setup_child_node_2->setIcon(0,QIcon(":/image/about.ico"));

    // ----------------------------------------------------------
    // 創(chuàng)建 [頁面布局] 父節(jié)點
    // ----------------------------------------------------------
    QTreeWidgetItem *page_layout = new QTreeWidgetItem(ui->treeWidget,QStringList(QString("頁面布局")));
    page_layout->setFlags(Qt::ItemIsSelectable | Qt::ItemIsUserCheckable | Qt::ItemIsEnabled | Qt::ItemIsAutoTristate);
    page_layout->setIcon(0,QIcon(":/image/lock.ico"));

    QTreeWidgetItem *page_layout_clild_1 = new QTreeWidgetItem(page_layout);
    page_layout_clild_1->setText(0,"頁面配置");
    page_layout_clild_1->setIcon(0,QIcon(":/image/about.ico"));

    QTreeWidgetItem *page_layout_clild_2 = new QTreeWidgetItem(page_layout);
    page_layout_clild_2->setText(0,"頁面參數");
    page_layout_clild_2->setIcon(0,QIcon(":/image/about.ico"));

    ui->treeWidget->expandAll();
}

當上述代碼運行后我們可以得到一個經過美化后的頁面，但我們還需要將TreeWidget與TabWidget組件的頁碼進行綁定，當用戶點擊TreeWidget組件時我們可以通過on_treeWidget_itemDoubleClicked槽函數獲取到點擊的頁，通過在TreeWidget組件上右鍵并轉到槽，找到itemDoubleClicked被點擊事件，當頁面被點擊時則觸發(fā)跳轉，代碼如下所示；

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);
     }
}

運行這個程序，讀者可自行切換測試效果，當需要功能分頁時只需要分別開發(fā)不同頁面并放入到特定的TabWidget組中即可，如下圖所示；