Qt中Tab與Tree組件實現(xiàn)分頁菜單
Qt 是一個跨平臺C++圖形界面開發(fā)庫,利用Qt可以快速開發(fā)跨平臺窗體應(yīng)用程序,在Qt中我們可以通過拖拽的方式將不同組件放到指定的位置,實現(xiàn)圖形化開發(fā)極大的方便了開發(fā)效率,本章將重點介紹tabWidget
選擇夾組件與TreeWidget
樹形選擇組件的常用方法及靈活運用。
1.1 TabWidget
QTabWidget
是 Qt 中的一個用于顯示多個頁面的小部件,其中每個頁面通常包含不同的內(nèi)容。每個頁面與一個標(biāo)簽相關(guān)聯(lián),用戶可以通過點擊標(biāo)簽來切換不同的頁面。QTabWidget
是一個常見的用戶界面元素,用于組織和展示具有層次結(jié)構(gòu)的信息。
以下是關(guān)于 QTabWidget
的主要特點和用法:
主要特點
- 多頁顯示:
QTabWidget
允許在同一窗口中顯示多個頁面,每個頁面由一個標(biāo)簽頁表示。 - 標(biāo)簽頁: 每個頁面都有一個與之相關(guān)聯(lián)的標(biāo)簽,通常是一個文本標(biāo)簽或包含圖標(biāo)的標(biāo)簽,用于顯示頁面的名稱或標(biāo)識。
- 切換頁面: 用戶可以通過點擊標(biāo)簽頁來切換顯示不同的頁面,使得只有一個頁面處于可見狀態(tài)。
- 自定義標(biāo)簽頁:
QTabWidget
允許通過添加小部件(如按鈕、文本框等)作為標(biāo)簽頁,以定制標(biāo)簽頁的外觀和功能。
以下是 QTabWidget
類的一些常用方法的說明和概述,以表格形式列出:
方法 | 描述 |
---|---|
QTabWidget(QWidget *parent = nullptr) | 構(gòu)造函數(shù),創(chuàng)建一個 QTabWidget 對象。 |
addTab(QWidget *widget, const QString &label) | 向 QTabWidget 添加一個標(biāo)簽頁,并關(guān)聯(lián)一個小部件。 |
insertTab(int index, QWidget *widget, const QString &label) | 在指定位置插入一個標(biāo)簽頁,并關(guān)聯(lián)一個小部件。 |
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 對象,允許對標(biāo)簽欄進(jìn)行更高級的操作。 |
tabBar()->setTabButton(int index, QTabBar::ButtonPosition position, QWidget *widget) | 在指定位置添加一個小部件按鈕到標(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ā)生變化時發(fā)出的信號,連接到槽函數(shù)以執(zhí)行相應(yīng)的操作。 |
tabCloseRequested(int index) | 用戶請求關(guān)閉標(biāo)簽頁時發(fā)出的信號,連接到槽函數(shù)以執(zhí)行相應(yīng)的操作。 |
這些方法提供了對 QTabWidget
進(jìn)行標(biāo)簽頁管理、屬性設(shè)置以及與標(biāo)簽頁交互的控制。你可以根據(jù)具體需求使用這些方法,定制 QTabWidget
的外觀和行為。
與其他通用組件不同,TabWidget 組件只能通過在頁面中添加,當(dāng)需要增加新的子菜單時,可以通過右鍵組件選中插入頁,在當(dāng)前之后插入,這里我們分別增加四個子夾,此處只需要增加不需要重命名。
針對子夾的美化也很簡單,只需要調(diào)用setTab
系列函數(shù)即可,需要注意的是,調(diào)用這些函數(shù)其中第一個參數(shù)均為子選擇夾的下標(biāo)索引值,該索引值默認(rèn)是從0開始計數(shù)的,完整代碼如下所示;
MainWindow::MainWindow(QWidget *parent): QMainWindow(parent), ui(new Ui::MainWindow) { ui->setupUi(this); // 全局配置tabWidget選項卡 ui->tabWidget->setTabPosition(QTabWidget::North); // 設(shè)置選項卡方位 ui->tabWidget->setIconSize(QSize(50, 25)); // 設(shè)置圖標(biāo)整體大小 ui->tabWidget->setTabShape(QTabWidget::Triangular); // 設(shè)置選項卡形狀 ui->tabWidget->setMovable(true); // 設(shè)置選項卡是否可拖動 ui->tabWidget->usesScrollButtons(); // 選項卡滾動 // 設(shè)置選項卡1 ui->tabWidget->setTabText(0,QString("進(jìn)制轉(zhuǎn)換標(biāo)簽")); // 設(shè)置選項卡文本 ui->tabWidget->setTabIcon(0,QIcon(":/image/about.ico")); // 設(shè)置選項卡圖標(biāo) ui->tabWidget->setTabToolTip(0,QString("SpinBox 與進(jìn)制轉(zhuǎn)換")); // 設(shè)置鼠標(biāo)懸停提示 // 設(shè)置選項卡2 ui->tabWidget->setTabText(1,QString("顏色配置標(biāo)簽")); // 設(shè)置選項卡文本 ui->tabWidget->setTabIcon(1,QIcon(":/image/file.ico")); // 設(shè)置選項卡圖標(biāo) ui->tabWidget->setTabToolTip(1,QString("滑塊條的使用")); // 設(shè)置鼠標(biāo)懸停提示 // 設(shè)置選項卡3 ui->tabWidget->setTabText(2,QString("系統(tǒng)配置標(biāo)簽")); // 設(shè)置選項卡文本 ui->tabWidget->setTabIcon(2,QIcon(":/image/lock.ico")); // 設(shè)置選項卡圖標(biāo) ui->tabWidget->setTabToolTip(2,QString("圓形組件與數(shù)碼表")); // 設(shè)置鼠標(biāo)懸停提示 // 設(shè)置選項卡4 ui->tabWidget->setTabText(3,QString("文件配置標(biāo)簽")); // 設(shè)置選項卡文本 ui->tabWidget->setTabIcon(3,QIcon(":/image/lock.ico")); // 設(shè)置選項卡圖標(biāo) ui->tabWidget->setTabToolTip(3,QString("文件配置組合")); // 設(shè)置鼠標(biāo)懸停提示 }
該組件常用于分頁操作,以讓應(yīng)用程序可以在一個頁面中容納更多的子頁面,如下圖我們分別創(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)顯示功能。
以下是關(guān)于 QTreeWidget
的主要特點和用法:
主要特點
- 樹形結(jié)構(gòu):
QTreeWidget
支持顯示樹形結(jié)構(gòu),每個節(jié)點可以包含子節(jié)點,形成一個層次化的樹。 - 列顯示: 可以在每個節(jié)點下顯示多列數(shù)據(jù),每列可以包含不同的信息,這使得
QTreeWidget
可以用于顯示表格型數(shù)據(jù)。 - 編輯節(jié)點: 用戶可以編輯節(jié)點的數(shù)據(jù),允許動態(tài)修改樹的內(nèi)容。
- 選擇和操作: 提供了豐富的選擇和操作功能,用戶可以通過鍵盤或鼠標(biāo)進(jìn)行節(jié)點的選擇、展開和折疊等操作。
- 信號與槽:
QTreeWidget
發(fā)送各種信號,如itemClicked
、itemDoubleClicked
等,以便在用戶與樹交互時執(zhí)行相應(yīng)的操作。
以下是 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) | 設(shè)置當(dāng)前項。 |
currentItem() | 獲取當(dāng)前項。 |
setItemWidget(QTreeWidgetItem *item, int column, QWidget *widget) | 在指定項和列上設(shè)置一個小部件。 |
itemWidget(QTreeWidgetItem *item, int column) | 獲取指定項和列上的小部件。 |
editItem(QTreeWidgetItem *item, int column) | 編輯指定項和列的數(shù)據(jù)。 |
closePersistentEditor(QTreeWidgetItem *item, int column) | 關(guān)閉指定項和列上的持久編輯器。 |
collapseItem(QTreeWidgetItem *item) | 折疊指定項。 |
expandItem(QTreeWidgetItem *item) | 展開指定項。 |
isItemExpanded(QTreeWidgetItem *item) | 檢查指定項是否展開。 |
setItemExpanded(QTreeWidgetItem *item, bool expand) | 設(shè)置指定項的展開狀態(tài)。 |
scrollToItem(QTreeWidgetItem *item, QAbstractItemView::ScrollHint hint = EnsureVisible) | 滾動視圖以確保指定項可見。 |
setItemHidden(QTreeWidgetItem *item, bool hide) | 設(shè)置指定項的隱藏狀態(tài)。 |
isItemHidden(QTreeWidgetItem *item) | 檢查指定項是否隱藏。 |
setItemDisabled(QTreeWidgetItem *item, bool disable) | 設(shè)置指定項的禁用狀態(tài)。 |
isItemDisabled(QTreeWidgetItem *item) | 檢查指定項是否禁用。 |
setItemSelected(QTreeWidgetItem *item, bool select) | 設(shè)置指定項的選擇狀態(tài)。 |
isItemSelected(QTreeWidgetItem *item) | 檢查指定項是否被選擇。 |
itemAt(const QPoint &p) | 返回在指定位置的項。 |
indexOfTopLevelItem(QTreeWidgetItem *item) | 獲取指定頂級項的索引。 |
clearSelection() | 清除所有選定的項。 |
sortItems(int column, Qt::SortOrder order = Qt::AscendingOrder) | 根據(jù)指定列的數(shù)據(jù)對項進(jìn)行排序。 |
headerItem() | 獲取樹的標(biāo)題項。 |
setHeaderItem(QTreeWidgetItem *item) | 設(shè)置樹的標(biāo)題項。 |
header() | 獲取樹的標(biāo)題。 |
setHeaderLabel(const QString &label) | 設(shè)置樹的標(biāo)題。 |
headerItem() | 獲取樹的標(biāo)題項。 |
setHeaderItem(QTreeWidgetItem *item) | 設(shè)置樹的標(biāo)題項。 |
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ù)對項進(jìn)行排序。 |
currentChanged(QTreeWidgetItem *current, QTreeWidgetItem *previous) | 當(dāng)前項發(fā)生變化時發(fā)出的信號,連接到槽函數(shù)以執(zhí)行相應(yīng)的操作。 |
itemClicked(QTreeWidgetItem *item, int column) | 項被點擊時發(fā)出的信號,連接到槽函數(shù)以執(zhí)行相應(yīng)的操作。 |
itemDoubleClicked(QTreeWidgetItem *item, int column) | 項被雙擊時發(fā)出的信號,連接到槽函數(shù)以執(zhí)行相應(yīng)的操作。 |
itemPressed(QTreeWidgetItem *item, int column) | 項被按下時發(fā)出的信號,連接到槽函數(shù)以執(zhí)行相應(yīng)的操作。 |
itemActivated(QTreeWidgetItem *item, int column) | 項被激活時發(fā)出的信號,連接到槽函數(shù)以執(zhí)行相應(yīng)的操作。 |
itemCollapsed(QTreeWidgetItem *item) | 項被折疊時發(fā)出的信號,連接到槽函數(shù)以執(zhí)行相應(yīng)的操作。 |
itemExpanded(QTreeWidgetItem *item) | 項被展開時發(fā)出的信號,連接到槽函數(shù)以執(zhí)行相應(yīng)的操作。 |
itemChanged(QTreeWidgetItem *item, int column) | 項的數(shù)據(jù)發(fā)生變化時發(fā)出的信號,連接到槽函數(shù)以執(zhí)行相應(yīng)的操作。 |
itemSelectionChanged() | 選定項發(fā)生變化時發(fā)出的信號,連接到槽函數(shù)以執(zhí)行相應(yīng)的操作。 |
這些方法提供了對 QTreeWidget
進(jìn)行樹節(jié)點管理、屬性設(shè)置以及與樹節(jié)點交互的控制。你可以根據(jù)具體需求使用這些方法,定制 QTreeWidget
的外觀和行為。
雖然TreeWidget
組件可以實現(xiàn)多節(jié)點的增刪改查功能,但在一般的應(yīng)用場景中基本上只使用一層結(jié)構(gòu)即可解決大部分開發(fā)需求,TreeWidget
組件通??膳浜?code>TabWidget組件實現(xiàn)類似于樹形菜單欄的功能,當(dāng)用戶點擊菜單欄中的選項時則會跳轉(zhuǎn)到不同的頁面上。
首先在Qt的UI
編輯界面左側(cè)加入TreeWidget
組件,右側(cè)加入TabWidget
組件,將頁面中的TabWidget
組件增加指定頁,整體頁面布局如下所示;
要實現(xiàn)對頁面的美化只需要在代碼中進(jìn)行調(diào)整,在MainWindow::MainWindow
主函數(shù)中我們對其中的兩個組件進(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é)點 // ---------------------------------------------------------- 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,"設(shè)置菜單"); 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(); }
當(dāng)上述代碼運行后我們可以得到一個經(jīng)過美化后的頁面,但我們還需要將TreeWidget
與TabWidget
組件的頁碼進(jìn)行綁定,當(dāng)用戶點擊TreeWidget
組件時我們可以通過on_treeWidget_itemDoubleClicked
槽函數(shù)獲取到點擊的頁,通過在TreeWidget
組件上右鍵并轉(zhuǎn)到槽,找到itemDoubleClicked
被點擊事件,當(dāng)頁面被點擊時則觸發(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); } }
運行這個程序,讀者可自行切換測試效果,當(dāng)需要功能分頁時只需要分別開發(fā)不同頁面并放入到特定的TabWidget
組中即可,如下圖所示;
到此這篇關(guān)于Qt中Tab與Tree組件實現(xiàn)分頁菜單的文章就介紹到這了,更多相關(guān)Qt Tab與Tree分頁菜單內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
解讀C語言非void函數(shù)卻沒有return會怎么樣
這篇文章主要介紹了解讀C語言非void函數(shù)卻沒有return會怎么樣的問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-02-02Visual Studio Code 2020安裝教程及CPP環(huán)境配置(教程圖解)
這篇文章主要介紹了Visual Studio Code 2020安裝教程、CPP環(huán)境配置,本文通過圖文并茂的形式給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-03-03C++多線程實現(xiàn)TCP服務(wù)器端同時和多個客戶端通信
通訊建立后首先由服務(wù)器端發(fā)送消息,客戶端接收消息;接著客戶端發(fā)送消息,服務(wù)器端接收消息,實現(xiàn)交互發(fā)送消息。本文主要介紹了C++多線程實現(xiàn)TCP服務(wù)器端同時和多個客戶端通信,感興趣的可以了解一下2021-05-05