Qt中Tab與Tree組件實現(xiàn)分頁菜單
Qt 是一個跨平臺C++圖形界面開發(fā)庫,利用Qt可以快速開發(fā)跨平臺窗體應用程序,在Qt中我們可以通過拖拽的方式將不同組件放到指定的位置,實現(xiàn)圖形化開發(fā)極大的方便了開發(fā)效率,本章將重點介紹tabWidget選擇夾組件與TreeWidget樹形選擇組件的常用方法及靈活運用。
1.1 TabWidget
QTabWidget 是 Qt 中的一個用于顯示多個頁面的小部件,其中每個頁面通常包含不同的內(nèi)容。每個頁面與一個標簽相關聯(lián),用戶可以通過點擊標簽來切換不同的頁面。QTabWidget 是一個常見的用戶界面元素,用于組織和展示具有層次結(jié)構(gòu)的信息。
以下是關于 QTabWidget 的主要特點和用法:
主要特點
- 多頁顯示:
QTabWidget允許在同一窗口中顯示多個頁面,每個頁面由一個標簽頁表示。 - 標簽頁: 每個頁面都有一個與之相關聯(lián)的標簽,通常是一個文本標簽或包含圖標的標簽,用于顯示頁面的名稱或標識。
- 切換頁面: 用戶可以通過點擊標簽頁來切換顯示不同的頁面,使得只有一個頁面處于可見狀態(tài)。
- 自定義標簽頁:
QTabWidget允許通過添加小部件(如按鈕、文本框等)作為標簽頁,以定制標簽頁的外觀和功能。
以下是 QTabWidget 類的一些常用方法的說明和概述,以表格形式列出:
| 方法 | 描述 |
|---|---|
QTabWidget(QWidget *parent = nullptr) | 構(gòu)造函數(shù),創(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() | 獲取標簽頁的數(shù)量。 |
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ā)出的信號,連接到槽函數(shù)以執(zhí)行相應的操作。 |
tabCloseRequested(int index) | 用戶請求關閉標簽頁時發(fā)出的信號,連接到槽函數(shù)以執(zhí)行相應的操作。 |
這些方法提供了對 QTabWidget 進行標簽頁管理、屬性設置以及與標簽頁交互的控制。你可以根據(jù)具體需求使用這些方法,定制 QTabWidget 的外觀和行為。
與其他通用組件不同,TabWidget 組件只能通過在頁面中添加,當需要增加新的子菜單時,可以通過右鍵組件選中插入頁,在當前之后插入,這里我們分別增加四個子夾,此處只需要增加不需要重命名。

針對子夾的美化也很簡單,只需要調(diào)用setTab系列函數(shù)即可,需要注意的是,調(diào)用這些函數(shù)其中第一個參數(shù)均為子選擇夾的下標索引值,該索引值默認是從0開始計數(shù)的,完整代碼如下所示;
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("進制轉(zhuǎn)換標簽")); // 設置選項卡文本
ui->tabWidget->setTabIcon(0,QIcon(":/image/about.ico")); // 設置選項卡圖標
ui->tabWidget->setTabToolTip(0,QString("SpinBox 與進制轉(zhuǎn)換")); // 設置鼠標懸停提示
// 設置選項卡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("圓形組件與數(shù)碼表")); // 設置鼠標懸停提示
// 設置選項卡4
ui->tabWidget->setTabText(3,QString("文件配置標簽")); // 設置選項卡文本
ui->tabWidget->setTabIcon(3,QIcon(":/image/lock.ico")); // 設置選項卡圖標
ui->tabWidget->setTabToolTip(3,QString("文件配置組合")); // 設置鼠標懸停提示
}
該組件常用于分頁操作,以讓應用程序可以在一個頁面中容納更多的子頁面,如下圖我們分別創(chuàng)建了四個選擇夾,并實現(xiàn)了分頁展示的效果;

1.2 TreeWidget
QTreeWidget 是 Qt 中的一個用于顯示樹形結(jié)構(gòu)的小部件。它允許用戶通過展開和折疊樹節(jié)點來查看和管理層次化的數(shù)據(jù)。每個節(jié)點可以包含子節(jié)點,形成一個樹狀結(jié)構(gòu)。QTreeWidget 繼承自 QTreeWidget,提供了更高級的樹狀結(jié)構(gòu)顯示功能。
以下是關于 QTreeWidget 的主要特點和用法:
主要特點
- 樹形結(jié)構(gòu):
QTreeWidget支持顯示樹形結(jié)構(gòu),每個節(jié)點可以包含子節(jié)點,形成一個層次化的樹。 - 列顯示: 可以在每個節(jié)點下顯示多列數(shù)據(jù),每列可以包含不同的信息,這使得
QTreeWidget可以用于顯示表格型數(shù)據(jù)。 - 編輯節(jié)點: 用戶可以編輯節(jié)點的數(shù)據(jù),允許動態(tài)修改樹的內(nèi)容。
- 選擇和操作: 提供了豐富的選擇和操作功能,用戶可以通過鍵盤或鼠標進行節(jié)點的選擇、展開和折疊等操作。
- 信號與槽:
QTreeWidget發(fā)送各種信號,如itemClicked、itemDoubleClicked等,以便在用戶與樹交互時執(zhí)行相應的操作。
以下是 QTreeWidget 類的一些常用方法的說明和概述,以表格形式列出:
| 方法 | 描述 |
|---|---|
QTreeWidget(QWidget *parent = nullptr) | 構(gòu)造函數(shù),創(chuàng)建一個 QTreeWidget 對象。 |
addTopLevelItem(QTreeWidgetItem *item) | 向樹中添加一個頂級項。 |
insertTopLevelItem(int index, QTreeWidgetItem *item) | 在指定位置插入一個頂級項。 |
takeTopLevelItem(int index) | 移除并返回指定位置的頂級項。 |
clear() | 移除所有的項。 |
topLevelItemCount() | 獲取頂級項的數(shù)量。 |
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) | 編輯指定項和列的數(shù)據(jù)。 |
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) | 根據(jù)指定列的數(shù)據(jù)對項進行排序。 |
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) | 根據(jù)指定列的數(shù)據(jù)對項進行排序。 |
currentChanged(QTreeWidgetItem *current, QTreeWidgetItem *previous) | 當前項發(fā)生變化時發(fā)出的信號,連接到槽函數(shù)以執(zhí)行相應的操作。 |
itemClicked(QTreeWidgetItem *item, int column) | 項被點擊時發(fā)出的信號,連接到槽函數(shù)以執(zhí)行相應的操作。 |
itemDoubleClicked(QTreeWidgetItem *item, int column) | 項被雙擊時發(fā)出的信號,連接到槽函數(shù)以執(zhí)行相應的操作。 |
itemPressed(QTreeWidgetItem *item, int column) | 項被按下時發(fā)出的信號,連接到槽函數(shù)以執(zhí)行相應的操作。 |
itemActivated(QTreeWidgetItem *item, int column) | 項被激活時發(fā)出的信號,連接到槽函數(shù)以執(zhí)行相應的操作。 |
itemCollapsed(QTreeWidgetItem *item) | 項被折疊時發(fā)出的信號,連接到槽函數(shù)以執(zhí)行相應的操作。 |
itemExpanded(QTreeWidgetItem *item) | 項被展開時發(fā)出的信號,連接到槽函數(shù)以執(zhí)行相應的操作。 |
itemChanged(QTreeWidgetItem *item, int column) | 項的數(shù)據(jù)發(fā)生變化時發(fā)出的信號,連接到槽函數(shù)以執(zhí)行相應的操作。 |
itemSelectionChanged() | 選定項發(fā)生變化時發(fā)出的信號,連接到槽函數(shù)以執(zhí)行相應的操作。 |
這些方法提供了對 QTreeWidget 進行樹節(jié)點管理、屬性設置以及與樹節(jié)點交互的控制。你可以根據(jù)具體需求使用這些方法,定制 QTreeWidget 的外觀和行為。
雖然TreeWidget組件可以實現(xiàn)多節(jié)點的增刪改查功能,但在一般的應用場景中基本上只使用一層結(jié)構(gòu)即可解決大部分開發(fā)需求,TreeWidget組件通??膳浜?code>TabWidget組件實現(xiàn)類似于樹形菜單欄的功能,當用戶點擊菜單欄中的選項時則會跳轉(zhuǎn)到不同的頁面上。
首先在Qt的UI編輯界面左側(cè)加入TreeWidget組件,右側(cè)加入TabWidget組件,將頁面中的TabWidget組件增加指定頁,整體頁面布局如下所示;

要實現(xiàn)對頁面的美化只需要在代碼中進行調(diào)整,在MainWindow::MainWindow主函數(shù)中我們對其中的兩個組件進行初始化操作,并通過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,"頁面參數(shù)");
page_layout_clild_2->setIcon(0,QIcon(":/image/about.ico"));
ui->treeWidget->expandAll();
}
當上述代碼運行后我們可以得到一個經(jīng)過美化后的頁面,但我們還需要將TreeWidget與TabWidget組件的頁碼進行綁定,當用戶點擊TreeWidget組件時我們可以通過on_treeWidget_itemDoubleClicked槽函數(shù)獲取到點擊的頁,通過在TreeWidget組件上右鍵并轉(zhuǎn)到槽,找到itemDoubleClicked被點擊事件,當頁面被點擊時則觸發(fā)跳轉(zhuǎn),代碼如下所示;
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 == "頁面參數(shù)")
{
ui->tabWidget->setCurrentIndex(3);
}
}
運行這個程序,讀者可自行切換測試效果,當需要功能分頁時只需要分別開發(fā)不同頁面并放入到特定的TabWidget組中即可,如下圖所示;

到此這篇關于Qt中Tab與Tree組件實現(xiàn)分頁菜單的文章就介紹到這了,更多相關Qt Tab與Tree分頁菜單內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
解讀C語言非void函數(shù)卻沒有return會怎么樣
這篇文章主要介紹了解讀C語言非void函數(shù)卻沒有return會怎么樣的問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-02-02
Visual Studio Code 2020安裝教程及CPP環(huán)境配置(教程圖解)
這篇文章主要介紹了Visual Studio Code 2020安裝教程、CPP環(huán)境配置,本文通過圖文并茂的形式給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-03-03
C++多線程實現(xiàn)TCP服務器端同時和多個客戶端通信
通訊建立后首先由服務器端發(fā)送消息,客戶端接收消息;接著客戶端發(fā)送消息,服務器端接收消息,實現(xiàn)交互發(fā)送消息。本文主要介紹了C++多線程實現(xiàn)TCP服務器端同時和多個客戶端通信,感興趣的可以了解一下2021-05-05

