C++ Qt开发：Tab与Tree组件实现分页菜单
生活随笔
收集整理的這篇文章主要介紹了
C++ Qt开发：Tab与Tree组件实现分页菜单
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
Qt 是一個(gè)跨平臺(tái)C++圖形界面開發(fā)庫(kù)，利用Qt可以快速開發(fā)跨平臺(tái)窗體應(yīng)用程序，在Qt中我們可以通過拖拽的方式將不同組件放到指定的位置，實(shí)現(xiàn)圖形化開發(fā)極大的方便了開發(fā)效率，本章將重點(diǎn)介紹tabWidget選擇夾組件與TreeWidget樹形選擇組件，的常用方法及靈活運(yùn)用。
1.1 TabWidget
QTabWidget 是 Qt 中的一個(gè)用于顯示多個(gè)頁面的小部件，其中每個(gè)頁面通常包含不同的內(nèi)容。每個(gè)頁面與一個(gè)標(biāo)簽相關(guān)聯(lián)，用戶可以通過點(diǎn)擊標(biāo)簽來切換不同的頁面。QTabWidget 是一個(gè)常見的用戶界面元素，用于組織和展示具有層次結(jié)構(gòu)的信息。
以下是關(guān)于 QTabWidget 的主要特點(diǎn)和用法：
主要特點(diǎn)
-
多頁顯示：
QTabWidget允許在同一窗口中顯示多個(gè)頁面，每個(gè)頁面由一個(gè)標(biāo)簽頁表示。 - 標(biāo)簽頁： 每個(gè)頁面都有一個(gè)與之相關(guān)聯(lián)的標(biāo)簽，通常是一個(gè)文本標(biāo)簽或包含圖標(biāo)的標(biāo)簽，用于顯示頁面的名稱或標(biāo)識(shí)。
- 切換頁面： 用戶可以通過點(diǎn)擊標(biāo)簽頁來切換顯示不同的頁面，使得只有一個(gè)頁面處于可見狀態(tài)。
-
自定義標(biāo)簽頁：
QTabWidget允許通過添加小部件（如按鈕、文本框等）作為標(biāo)簽頁，以定制標(biāo)簽頁的外觀和功能。
以下是 QTabWidget 類的一些常用方法的說明和概述，以表格形式列出：
| 方法 | 描述 |
|---|---|
QTabWidget(QWidget *parent = nullptr) |
構(gòu)造函數(shù)，創(chuàng)建一個(gè) QTabWidget 對(duì)象。 |
addTab(QWidget *widget, const QString &label) |
向 QTabWidget 添加一個(gè)標(biāo)簽頁，并關(guān)聯(lián)一個(gè)小部件。 |
insertTab(int index, QWidget *widget, const QString &label) |
在指定位置插入一個(gè)標(biāo)簽頁，并關(guān)聯(lián)一個(gè)小部件。 |
removeTab(int index) |
移除指定位置的標(biāo)簽頁。 |
clear() |
移除所有的標(biāo)簽頁。 |
setCurrentIndex(int index) |
設(shè)置當(dāng)前顯示的標(biāo)簽頁的索引。 |
currentIndex() |
獲取當(dāng)前顯示的標(biāo)簽頁的索引。 |
count() |
獲取標(biāo)簽頁的數(shù)量。 |
widget(int index) |
獲取指定索引處的標(biāo)簽頁關(guān)聯(lián)的小部件。 |
tabText(int index) |
獲取指定索引處的標(biāo)簽頁的文本。 |
setTabText(int index, const QString &text) |
設(shè)置指定索引處的標(biāo)簽頁的文本。 |
tabIcon(int index) |
獲取指定索引處的標(biāo)簽頁的圖標(biāo)。 |
setTabIcon(int index, const QIcon &icon) |
設(shè)置指定索引處的標(biāo)簽頁的圖標(biāo)。 |
tabBar() |
返回 QTabBar 對(duì)象，允許對(duì)標(biāo)簽欄進(jìn)行更高級(jí)的操作。 |
tabBar()->setTabButton(int index, QTabBar::ButtonPosition position, QWidget *widget) |
在指定位置添加一個(gè)小部件按鈕到標(biāo)簽頁。 |
setTabEnabled(int index, bool enable) |
啟用或禁用指定索引處的標(biāo)簽頁。 |
isTabEnabled(int index) |
檢查指定索引處的標(biāo)簽頁是否啟用。 |
setTabToolTip(int index, const QString &tip) |
設(shè)置指定索引處的標(biāo)簽頁的工具提示。 |
tabToolTip(int index) |
獲取指定索引處的標(biāo)簽頁的工具提示。 |
setTabWhatsThis(int index, const QString &text) |
設(shè)置指定索引處的標(biāo)簽頁的 What's This 文本。 |
tabWhatsThis(int index) |
獲取指定索引處的標(biāo)簽頁的 What's This 文本。 |
currentChanged(int index) |
當(dāng)前標(biāo)簽頁發(fā)生變化時(shí)發(fā)出的信號(hào)，連接到槽函數(shù)以執(zhí)行相應(yīng)的操作。 |
tabCloseRequested(int index) |
用戶請(qǐng)求關(guān)閉標(biāo)簽頁時(shí)發(fā)出的信號(hào)，連接到槽函數(shù)以執(zhí)行相應(yīng)的操作。 |
這些方法提供了對(duì) QTabWidget 進(jìn)行標(biāo)簽頁管理、屬性設(shè)置以及與標(biāo)簽頁交互的控制。你可以根據(jù)具體需求使用這些方法，定制 QTabWidget 的外觀和行為。
與其他通用組件不同，TabWidget 組件只能通過在頁面中添加，當(dāng)需要增加新的子菜單時(shí)，可以通過右鍵組件選中插入頁，在當(dāng)前之后插入，這里我們分別增加四個(gè)子夾，此處只需要增加不需要重命名。
針對(duì)子夾的美化也很簡(jiǎn)單，只需要調(diào)用setTab系列函數(shù)即可，需要注意的是，調(diào)用這些函數(shù)其中第一個(gè)參數(shù)均為子選擇夾的下標(biāo)索引值，該索引值默認(rèn)是從0開始計(jì)數(shù)的，完整代碼如下所示；
MainWindow::MainWindow(QWidget *parent): QMainWindow(parent), ui(new Ui::MainWindow)
{
ui->setupUi(this);
// 全局配置tabWidget選項(xiàng)卡
ui->tabWidget->setTabPosition(QTabWidget::North); // 設(shè)置選項(xiàng)卡方位
ui->tabWidget->setIconSize(QSize(50, 25)); // 設(shè)置圖標(biāo)整體大小
ui->tabWidget->setTabShape(QTabWidget::Triangular); // 設(shè)置選項(xiàng)卡形狀
ui->tabWidget->setMovable(true); // 設(shè)置選項(xiàng)卡是否可拖動(dòng)
ui->tabWidget->usesScrollButtons(); // 選項(xiàng)卡滾動(dòng)
// 設(shè)置選項(xiàng)卡1
ui->tabWidget->setTabText(0,QString("進(jìn)制轉(zhuǎn)換標(biāo)簽")); // 設(shè)置選項(xiàng)卡文本
ui->tabWidget->setTabIcon(0,QIcon(":/image/about.ico")); // 設(shè)置選項(xiàng)卡圖標(biāo)
ui->tabWidget->setTabToolTip(0,QString("SpinBox 與進(jìn)制轉(zhuǎn)換")); // 設(shè)置鼠標(biāo)懸停提示
// 設(shè)置選項(xiàng)卡2
ui->tabWidget->setTabText(1,QString("顏色配置標(biāo)簽")); // 設(shè)置選項(xiàng)卡文本
ui->tabWidget->setTabIcon(1,QIcon(":/image/file.ico")); // 設(shè)置選項(xiàng)卡圖標(biāo)
ui->tabWidget->setTabToolTip(1,QString("滑塊條的使用")); // 設(shè)置鼠標(biāo)懸停提示
// 設(shè)置選項(xiàng)卡3
ui->tabWidget->setTabText(2,QString("系統(tǒng)配置標(biāo)簽")); // 設(shè)置選項(xiàng)卡文本
ui->tabWidget->setTabIcon(2,QIcon(":/image/lock.ico")); // 設(shè)置選項(xiàng)卡圖標(biāo)
ui->tabWidget->setTabToolTip(2,QString("圓形組件與數(shù)碼表")); // 設(shè)置鼠標(biāo)懸停提示
// 設(shè)置選項(xiàng)卡4
ui->tabWidget->setTabText(3,QString("文件配置標(biāo)簽")); // 設(shè)置選項(xiàng)卡文本
ui->tabWidget->setTabIcon(3,QIcon(":/image/lock.ico")); // 設(shè)置選項(xiàng)卡圖標(biāo)
ui->tabWidget->setTabToolTip(3,QString("文件配置組合")); // 設(shè)置鼠標(biāo)懸停提示
}
該組件常用于分頁操作，以讓應(yīng)用程序可以在一個(gè)頁面中容納更多的子頁面，如下圖我們分別創(chuàng)建了四個(gè)選擇夾，并實(shí)現(xiàn)了分頁展示的效果；
1.2 TreeWidget
QTreeWidget 是 Qt 中的一個(gè)用于顯示樹形結(jié)構(gòu)的小部件。它允許用戶通過展開和折疊樹節(jié)點(diǎn)來查看和管理層次化的數(shù)據(jù)。每個(gè)節(jié)點(diǎn)可以包含子節(jié)點(diǎn)，形成一個(gè)樹狀結(jié)構(gòu)。QTreeWidget 繼承自 QTreeWidget，提供了更高級(jí)的樹狀結(jié)構(gòu)顯示功能。
以下是關(guān)于 QTreeWidget 的主要特點(diǎn)和用法：
主要特點(diǎn)
-
樹形結(jié)構(gòu)：
QTreeWidget支持顯示樹形結(jié)構(gòu)，每個(gè)節(jié)點(diǎn)可以包含子節(jié)點(diǎn)，形成一個(gè)層次化的樹。 -
列顯示： 可以在每個(gè)節(jié)點(diǎn)下顯示多列數(shù)據(jù)，每列可以包含不同的信息，這使得
QTreeWidget可以用于顯示表格型數(shù)據(jù)。 - 編輯節(jié)點(diǎn)： 用戶可以編輯節(jié)點(diǎn)的數(shù)據(jù)，允許動(dòng)態(tài)修改樹的內(nèi)容。
- 選擇和操作： 提供了豐富的選擇和操作功能，用戶可以通過鍵盤或鼠標(biāo)進(jìn)行節(jié)點(diǎn)的選擇、展開和折疊等操作。
-
信號(hào)與槽：
QTreeWidget發(fā)送各種信號(hào)，如itemClicked、itemDoubleClicked等，以便在用戶與樹交互時(shí)執(zhí)行相應(yīng)的操作。
以下是 QTreeWidget 類的一些常用方法的說明和概述，以表格形式列出：
| 方法 | 描述 |
|---|---|
QTreeWidget(QWidget *parent = nullptr) |
構(gòu)造函數(shù)，創(chuàng)建一個(gè) QTreeWidget 對(duì)象。 |
addTopLevelItem(QTreeWidgetItem *item) |
向樹中添加一個(gè)*項(xiàng)。 |
insertTopLevelItem(int index, QTreeWidgetItem *item) |
在指定位置插入一個(gè)*項(xiàng)。 |
takeTopLevelItem(int index) |
移除并返回指定位置的*項(xiàng)。 |
clear() |
移除所有的項(xiàng)。 |
topLevelItemCount() |
獲取*項(xiàng)的數(shù)量。 |
topLevelItem(int index) |
獲取指定位置的*項(xiàng)。 |
invisibleRootItem() |
獲取樹的不可見根項(xiàng)。 |
setCurrentItem(QTreeWidgetItem *item) |
設(shè)置當(dāng)前項(xiàng)。 |
currentItem() |
獲取當(dāng)前項(xiàng)。 |
setItemWidget(QTreeWidgetItem *item, int column, QWidget *widget) |
在指定項(xiàng)和列上設(shè)置一個(gè)小部件。 |
itemWidget(QTreeWidgetItem *item, int column) |
獲取指定項(xiàng)和列上的小部件。 |
editItem(QTreeWidgetItem *item, int column) |
編輯指定項(xiàng)和列的數(shù)據(jù)。 |
closePersistentEditor(QTreeWidgetItem *item, int column) |
關(guān)閉指定項(xiàng)和列上的持久編輯器。 |
collapseItem(QTreeWidgetItem *item) |
折疊指定項(xiàng)。 |
expandItem(QTreeWidgetItem *item) |
展開指定項(xiàng)。 |
isItemExpanded(QTreeWidgetItem *item) |
檢查指定項(xiàng)是否展開。 |
setItemExpanded(QTreeWidgetItem *item, bool expand) |
設(shè)置指定項(xiàng)的展開狀態(tài)。 |
scrollToItem(QTreeWidgetItem *item, QAbstractItemView::ScrollHint hint = EnsureVisible) |
滾動(dòng)視圖以確保指定項(xiàng)可見。 |
setItemHidden(QTreeWidgetItem *item, bool hide) |
設(shè)置指定項(xiàng)的隱藏狀態(tài)。 |
isItemHidden(QTreeWidgetItem *item) |
檢查指定項(xiàng)是否隱藏。 |
setItemDisabled(QTreeWidgetItem *item, bool disable) |
設(shè)置指定項(xiàng)的禁用狀態(tài)。 |
isItemDisabled(QTreeWidgetItem *item) |
檢查指定項(xiàng)是否禁用。 |
setItemSelected(QTreeWidgetItem *item, bool select) |
設(shè)置指定項(xiàng)的選擇狀態(tài)。 |
isItemSelected(QTreeWidgetItem *item) |
檢查指定項(xiàng)是否被選擇。 |
itemAt(const QPoint &p) |
返回在指定位置的項(xiàng)。 |
indexOfTopLevelItem(QTreeWidgetItem *item) |
獲取指定*項(xiàng)的索引。 |
clearSelection() |
清除所有選定的項(xiàng)。 |
sortItems(int column, Qt::SortOrder order = Qt::AscendingOrder) |
根據(jù)指定列的數(shù)據(jù)對(duì)項(xiàng)進(jìn)行排序。 |
headerItem() |
獲取樹的標(biāo)題項(xiàng)。 |
setHeaderItem(QTreeWidgetItem *item) |
設(shè)置樹的標(biāo)題項(xiàng)。 |
header() |
獲取樹的標(biāo)題。 |
setHeaderLabel(const QString &label) |
設(shè)置樹的標(biāo)題。 |
headerItem() |
獲取樹的標(biāo)題項(xiàng)。 |
setHeaderItem(QTreeWidgetItem *item) |
設(shè)置樹的標(biāo)題項(xiàng)。 |
header() |
獲取樹的標(biāo)題。 |
setHeaderLabel(const QString &label) |
設(shè)置樹的標(biāo)題。 |
setSortingEnabled(bool enable) |
啟用或禁用樹的排序功能。 |
isSortingEnabled() |
檢查樹的排序功能是否啟用。 |
sortColumn() |
獲取當(dāng)前排序的列。 |
sortOrder() |
獲取當(dāng)前排序的順序。 |
sortByColumn(int column, Qt::SortOrder order) |
根據(jù)指定列的數(shù)據(jù)對(duì)項(xiàng)進(jìn)行排序。 |
currentChanged(QTreeWidgetItem *current, QTreeWidgetItem *previous) |
當(dāng)前項(xiàng)發(fā)生變化時(shí)發(fā)出的信號(hào)，連接到槽函數(shù)以執(zhí)行相應(yīng)的操作。 |
itemClicked(QTreeWidgetItem *item, int column) |
項(xiàng)被點(diǎn)擊時(shí)發(fā)出的信號(hào)，連接到槽函數(shù)以執(zhí)行相應(yīng)的操作。 |
itemDoubleClicked(QTreeWidgetItem *item, int column) |
項(xiàng)被雙擊時(shí)發(fā)出的信號(hào)，連接到槽函數(shù)以執(zhí)行相應(yīng)的操作。 |
itemPressed(QTreeWidgetItem *item, int column) |
項(xiàng)被按下時(shí)發(fā)出的信號(hào)，連接到槽函數(shù)以執(zhí)行相應(yīng)的操作。 |
itemActivated(QTreeWidgetItem *item, int column) |
項(xiàng)被激活時(shí)發(fā)出的信號(hào)，連接到槽函數(shù)以執(zhí)行相應(yīng)的操作。 |
itemCollapsed(QTreeWidgetItem *item) |
項(xiàng)被折疊時(shí)發(fā)出的信號(hào)，連接到槽函數(shù)以執(zhí)行相應(yīng)的操作。 |
itemExpanded(QTreeWidgetItem *item) |
項(xiàng)被展開時(shí)發(fā)出的信號(hào)，連接到槽函數(shù)以執(zhí)行相應(yīng)的操作。 |
itemChanged(QTreeWidgetItem *item, int column) |
項(xiàng)的數(shù)據(jù)發(fā)生變化時(shí)發(fā)出的信號(hào)，連接到槽函數(shù)以執(zhí)行相應(yīng)的操作。 |
itemSelectionChanged() |
選定項(xiàng)發(fā)生變化時(shí)發(fā)出的信號(hào)，連接到槽函數(shù)以執(zhí)行相應(yīng)的操作。 |
這些方法提供了對(duì) QTreeWidget 進(jìn)行樹節(jié)點(diǎn)管理、屬性設(shè)置以及與樹節(jié)點(diǎn)交互的控制。你可以根據(jù)具體需求使用這些方法，定制 QTreeWidget 的外觀和行為。
雖然TreeWidget組件可以實(shí)現(xiàn)多節(jié)點(diǎn)的增刪改查功能，但在一般的應(yīng)用場(chǎng)景中基本上只使用一層結(jié)構(gòu)即可解決大部分開發(fā)需求，TreeWidget組件通常可配合TabWidget組件實(shí)現(xiàn)類似于樹形菜單欄的功能，當(dāng)用戶點(diǎn)擊菜單欄中的選項(xiàng)時(shí)則會(huì)跳轉(zhuǎn)到不同的頁面上。
首先在Qt的UI編輯界面左側(cè)加入TreeWidget組件，右側(cè)加入TabWidget組件，將頁面中的TabWidget組件增加指定頁，整體頁面布局如下所示；
要實(shí)現(xiàn)對(duì)頁面的美化只需要在代碼中進(jìn)行調(diào)整，在MainWindow::MainWindow主函數(shù)中我們對(duì)其中的兩個(gè)組件進(jìn)行初始化操作，并通過setText設(shè)置標(biāo)簽名，通過setIcon設(shè)置圖標(biāo)組，最后通過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)設(shè)置] 父節(jié)點(diǎn)
// ----------------------------------------------------------
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é)點(diǎn)添加子節(jié)點(diǎn)
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,"設(shè)置菜單");
system_setup_child_node_2->setIcon(0,QIcon(":/image/about.ico"));
// ----------------------------------------------------------
// 創(chuàng)建 [頁面布局] 父節(jié)點(diǎn)
// ----------------------------------------------------------
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();
}
當(dāng)上述代碼運(yùn)行后我們可以得到一個(gè)經(jīng)過美化后的頁面，但我們還需要將TreeWidget與TabWidget組件的頁碼進(jìn)行綁定，當(dāng)用戶點(diǎn)擊TreeWidget組件時(shí)我們可以通過on_treeWidget_itemDoubleClicked槽函數(shù)獲取到點(diǎn)擊的頁，通過在TreeWidget組件上右鍵并轉(zhuǎn)到槽，找到itemDoubleClicked被點(diǎn)擊事件，當(dāng)頁面被點(diǎn)擊時(shí)則觸發(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 == "設(shè)置菜單")
{
ui->tabWidget->setCurrentIndex(1);
}
if(str == "頁面配置")
{
ui->tabWidget->setCurrentIndex(2);
}
if(str == "頁面參數(shù)")
{
ui->tabWidget->setCurrentIndex(3);
}
}
運(yùn)行這個(gè)程序，讀者可自行切換測(cè)試效果，當(dāng)需要功能分頁時(shí)只需要分別開發(fā)不同頁面并放入到特定的TabWidget組中即可，如下圖所示；
總結(jié)
以上是生活随笔為你收集整理的C++ Qt开发：Tab与Tree组件实现分页菜单的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【滁州网站建设】网站能给企业带来什么？
- 下一篇： StarBlog - 2023年底更新内