C/C++ Qt 選擇夾TabWidget元件應用

lyshark發表於2021-11-24

在Qt中通過使用選擇夾元件可以實現在一個頁面中整合多種功能,我們以TabWidget選擇夾元件為例,實現在單個頁面中整合多個功能,並給每一個子夾增加對應的Ico圖示。

如果我們使用選擇夾元件,必須提前拖入UI介面中(無法程式碼生成),如下我們找到TabWidget並將其拖入UI介面中。

其次需要增加與美化程式碼對應的子夾數量,這裡我們分別增加三個子夾,此處只需要增加不需要重新命名。

接著我們需要增加三個子夾對應的圖示組,插入圖示組需要執行以下步驟。

  • 選擇Forms -> 右鍵(AddNew) -> Qt -> Qt Resource File -> 命名為 res

  • 新增字首/ -> 新增檔案 -> 匯入所有ICO檔案.

通過上方的配置後,我們的資源就會被編譯為二進位制檔案,此時通過程式碼中使用QIcon(":/image/1.ico")相對路徑即可引入到專案中。

#include "mainwindow.h"
#include "ui_mainwindow.h"

// https://www.cnblogs.com/lyshark
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/1.ico"));          // 設定選項卡圖示
    ui->tabWidget->setTabToolTip(0,QString("SpinBox 與進位制轉換"));  // 設定滑鼠懸停提示

    // 設定選項卡2
    ui->tabWidget->setTabText(1,QString("顏色配置標籤"));          // 設定選項卡文字
    ui->tabWidget->setTabIcon(1,QIcon(":/image/2.ico"));         // 設定選項卡圖示
    ui->tabWidget->setTabToolTip(1,QString("滑塊條的使用"));       // 設定滑鼠懸停提示

    // 設定選項卡3
    ui->tabWidget->setTabText(2,QString("系統配置標籤"));          // 設定選項卡文字
    ui->tabWidget->setTabIcon(2,QIcon(":/image/3.ico"));         // 設定選項卡圖示
    ui->tabWidget->setTabToolTip(2,QString("圓形元件與數碼錶"));    // 設定滑鼠懸停提示
}

MainWindow::~MainWindow()
{
    delete ui;
}

我們直接在程式碼中初始化這些選擇夾即可實現增加圖示以及字型等功能,執行後程式碼如下所示。

相關文章