當前位置：首頁 > 运维知识 > windows >内容正文

windows

C++ Qt开发：Tab与Tree组件实现分页菜单

發布時間：2023/12/24 windows 29 coder

生活随笔收集整理的這篇文章主要介紹了 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组件实现分页菜单的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：【滁州网站建设】网站能给企业带来什么？
下一篇： java信息管理系统总结_java实现科