C++ Qt開發：Tab與Tree組件實現分頁菜單

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

1.1 TabWidget

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

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

主要特點

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

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

方法	描述
`QTabWidget(QWidget *parent = nullptr)`	構造函數，創建一個 `QTabWidget` 對象。
`addTab(QWidget *widget, const QString &label)`	向 `QTabWidget` 添加一個標籤頁，並關聯一個小部件。
`insertTab(int index, QWidget *widget, const QString &label)`	在指定位置插入一個標籤頁，並關聯一個小部件。
`removeTab(int index)`	移除指定位置的標籤頁。
`clear()`	移除所有的標籤頁。
`setCurrentIndex(int index)`	設置當前顯示的標籤頁的索引。
`currentIndex()`	獲取當前顯示的標籤頁的索引。
`count()`	獲取標籤頁的數量。
`widget(int index)`	獲取指定索引處的標籤頁關聯的小部件。
`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)`	當前標籤頁發生變化時發出的信號，連接到槽函數以執行相應的操作。
`tabCloseRequested(int index)`	用戶請求關閉標籤頁時發出的信號，連接到槽函數以執行相應的操作。

這些方法提供了對 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("系統配置標籤"));          // 設置選項卡文本
    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("文件配置組合"));       // 設置鼠標懸停提示
}

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

1.2 TreeWidget

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

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

主要特點

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

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

方法	描述
`QTreeWidget(QWidget *parent = nullptr)`	構造函數，創建一個 `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)`	設置指定項的展開狀態。
`scrollToItem(QTreeWidgetItem *item, QAbstractItemView::ScrollHint hint = EnsureVisible)`	滾動視圖以確保指定項可見。
`setItemHidden(QTreeWidgetItem *item, bool hide)`	設置指定項的隱藏狀態。
`isItemHidden(QTreeWidgetItem *item)`	檢查指定項是否隱藏。
`setItemDisabled(QTreeWidgetItem *item, bool disable)`	設置指定項的禁用狀態。
`isItemDisabled(QTreeWidgetItem *item)`	檢查指定項是否禁用。
`setItemSelected(QTreeWidgetItem *item, bool select)`	設置指定項的選擇狀態。
`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)`	當前項發生變化時發出的信號，連接到槽函數以執行相應的操作。
`itemClicked(QTreeWidgetItem *item, int column)`	項被點擊時發出的信號，連接到槽函數以執行相應的操作。
`itemDoubleClicked(QTreeWidgetItem *item, int column)`	項被雙擊時發出的信號，連接到槽函數以執行相應的操作。
`itemPressed(QTreeWidgetItem *item, int column)`	項被按下時發出的信號，連接到槽函數以執行相應的操作。
`itemActivated(QTreeWidgetItem *item, int column)`	項被激活時發出的信號，連接到槽函數以執行相應的操作。
`itemCollapsed(QTreeWidgetItem *item)`	項被摺疊時發出的信號，連接到槽函數以執行相應的操作。
`itemExpanded(QTreeWidgetItem *item)`	項被展開時發出的信號，連接到槽函數以執行相應的操作。
`itemChanged(QTreeWidgetItem *item, int column)`	項的數據發生變化時發出的信號，連接到槽函數以執行相應的操作。
`itemSelectionChanged()`	選定項發生變化時發出的信號，連接到槽函數以執行相應的操作。

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

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

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

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

#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"));

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

    // 給父節點添加子節點
    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"));

    // ----------------------------------------------------------
    // 創建 [頁面佈局] 父節點
    // ----------------------------------------------------------
    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被點擊事件，當頁面被點擊時則觸發跳轉，代碼如下所示；

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

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

C++ Qt開發：Tab與Tree組件實現分頁菜單

1.1 TabWidget

主要特點

1.2 TreeWidget

主要特點

35K*14 薪，入職了！這公司只要不裁員，我能一直呆下去！

C++ Qt開發：QProcess進程管理模塊

C++ Qt開發：QUdpSocket實現組播通信

C++ Qt開發：QUdpSocket網絡通信組件

C++ Qt開發：QTcpSocket網絡通信組件

C++ Qt開發：QNetworkAccessManager網絡接口組件

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結