QT-ToolButton定制界面左側選項卡
- 1、效果預覽
- 2、表單初始化
- 3、設定按鍵信號連接和按鍵互斥顯示
- 4、添加qss界面美化
- 5、關鍵類頭檔案和源檔案
- 6、全部代碼下載
1、效果預覽

2、表單初始化
- 初始化toolbutton狀態屬性,設定支持選中狀態,堆疊視窗默認也選中第0個索引,
- 添加按鍵彈出選單,把一些拓展的其他表單添加到拓展按鍵里面,方便后續選項卡項添加,
// 初始化表單
void QToolButtonDemo::initForm()
{
// 設定toolbutton可選擇狀態
ui.tlbDebug->setCheckable(true);
ui.tlbExtern->setCheckable(false);
ui.tlbLog->setCheckable(true);
ui.tlbParam->setCheckable(true);
ui.tlbProgram->setCheckable(true);
// 設定默認選中程式
ui.tlbProgram->setChecked(true);
ui.stackedWidget->setCurrentIndex(0);
// 設定拓展按鍵選單
ui.tlbExtern->setPopupMode(QToolButton::InstantPopup);
auto externMenu = new QMenu(ui.tlbExtern);
auto controlAction = new QAction(QString::fromLocal8Bit("設備控制 "), externMenu);
auto videoAction = new QAction(QString::fromLocal8Bit("視頻監控 "), externMenu);
auto systemCopyAction = new QAction(QString::fromLocal8Bit("系統備份 "), externMenu);
// 添加選單
externMenu->addAction(controlAction);
externMenu->addAction(videoAction);
externMenu->addAction(systemCopyAction);
// 動作信號槽連接
connect(controlAction, SIGNAL(triggered()), this, SLOT(slotActionShow()));
connect(videoAction, SIGNAL(triggered()), this, SLOT(slotActionShow()));
connect(systemCopyAction, SIGNAL(triggered()), this, SLOT(slotActionShow()));
ui.tlbExtern->setMenu(externMenu);
}
3、設定按鍵信號連接和按鍵互斥顯示
- 選項卡的效果就是,選中其中一個,其他幾個都是關閉的狀態,為了達到這種效果,我們先創建一個函式,當按鍵物件傳入的時候,該按鍵為選中的狀態,其他按鍵清掉選中狀態,并且選項卡切換到指定的視窗,
// 按鍵選擇
void QToolButtonDemo::selectToolButton(QToolButton *pTlb)
{
if (ui.tlbProgram == pTlb)
{
ui.stackedWidget->setCurrentIndex(0);
ui.tlbProgram->setChecked(true);
ui.tlbDebug->setChecked(false);
ui.tlbParam->setChecked(false);
ui.tlbLog->setChecked(false);
ui.tlbExtern->setChecked(false);
}
else if (ui.tlbDebug == pTlb)
{
ui.stackedWidget->setCurrentIndex(1);
ui.tlbProgram->setChecked(false);
ui.tlbDebug->setChecked(true);
ui.tlbParam->setChecked(false);
ui.tlbLog->setChecked(false);
ui.tlbExtern->setChecked(false);
}
else if (ui.tlbParam == pTlb)
{
ui.stackedWidget->setCurrentIndex(2);
ui.tlbProgram->setChecked(false);
ui.tlbDebug->setChecked(false);
ui.tlbParam->setChecked(true);
ui.tlbLog->setChecked(false);
ui.tlbExtern->setChecked(false);
}
else if (ui.tlbLog == pTlb)
{
ui.stackedWidget->setCurrentIndex(3);
ui.tlbProgram->setChecked(false);
ui.tlbDebug->setChecked(false);
ui.tlbParam->setChecked(false);
ui.tlbLog->setChecked(true);
ui.tlbExtern->setChecked(false);
}
else if (ui.tlbExtern == pTlb)
{
ui.stackedWidget->setCurrentIndex(4);
ui.tlbProgram->setChecked(false);
ui.tlbDebug->setChecked(false);
ui.tlbParam->setChecked(false);
ui.tlbLog->setChecked(false);
ui.tlbExtern->setChecked(true);
}
}
4、添加qss界面美化
- 打開ui界面,在設計器直接添加樣式,這樣的效果的好處就是,每次添加完樣式之后,我們都可以預覽查看我們樣式的效果,當然如果當軟體存在很多的界面的時候,我們有會考慮從檔案直接加載樣式,


- 本次demo全部的樣式如下
QWidget
{
border:1px solid #242424;
border-radius:0px;
background:#484848;
}
QToolButton
{
border-style:none;
border:1px solid #242424;
color:#DCDCDC;
padding:5px;
min-height:15px;
border-radius:5px;
background:qlineargradient(spread:pad,x1:0,y1:0,x2:0,y2:1,stop:0 #484848,stop:1 #383838);
}
QToolButton:hover
{
background:qlineargradient(spread:pad,x1:0,y1:0,x2:0,y2:1,stop:0 #646464,stop:1 #525252);
}
QToolButton:pressed
{
background:qlineargradient(spread:pad,x1:0,y1:0,x2:0,y2:1,stop:0 #484848,stop:1 #383838);
}
QToolButton::menu-indicator
{
image:None;
}
QToolButton:checked
{
background-color: qlineargradient(spread:pad,x1:0,y1:0,x2:0,y2:1,stop:0 #FFCC33, stop:1 #FFCC33);
color:#4D4D4D;
border-radius:4px;
border:1px solid #B8B6B6;
}
QMenu
{
border-radius:4px;
background-color:rgb(89,87,87);
border: 3px solid rgb(235,110,36);
}
QMenu::item
{
border-radius:4px;
font-size: 9pt;
color: rgb(225,225,225);
border: 3px solid rgb(60,60,60);
background-color:rgb(89,87,87);
padding:12px 12px;
margin:2px 2px;
}
QMenu::item:selected
{
border-radius:4px;
background-color:rgb(235,110,36);
}
QMenu::item:pressed
{
background-color: qlineargradient(spread:pad,x1:0,y1:0,x2:0,y2:1,stop:0 #FFCC33, stop:1 #FFCC33);
color:#4D4D4D;
border-radius:4px;
border:1px solid #B8B6B6;
}
- 按鍵添加圖示的方式如圖所示

5、關鍵類頭檔案和源檔案
// 頭檔案
#pragma once
#include <QtWidgets/QMainWindow>
#include "ui_QToolButtonDemo.h"
class QToolButtonDemo : public QMainWindow
{
Q_OBJECT
public:
QToolButtonDemo(QWidget *parent = Q_NULLPTR);
private:
void initForm();
void signalSlotConnect();
void selectToolButton(QToolButton *pTlb);
private slots:
void slotToolButtonProgram();
void slotToolButtonDebug();
void slotToolButtonParam();
void slotToolButtonLog();
void slotToolButtonExtern();
void slotActionShow();
private:
Ui::QToolButtonDemoClass ui;
};
// 源檔案
#include "QToolButtonDemo.h"
#include <QMenu>
#include <QAction>
#include <QMessageBox>
QToolButtonDemo::QToolButtonDemo(QWidget *parent)
: QMainWindow(parent)
{
ui.setupUi(this);
initForm();
signalSlotConnect();
}
// 初始化表單
void QToolButtonDemo::initForm()
{
// 設定toolbutton可選擇狀態
ui.tlbDebug->setCheckable(true);
ui.tlbExtern->setCheckable(false);
ui.tlbLog->setCheckable(true);
ui.tlbParam->setCheckable(true);
ui.tlbProgram->setCheckable(true);
// 設定默認選中程式
ui.tlbProgram->setChecked(true);
ui.stackedWidget->setCurrentIndex(0);
// 設定拓展按鍵選單
ui.tlbExtern->setPopupMode(QToolButton::InstantPopup);
auto externMenu = new QMenu(ui.tlbExtern);
auto controlAction = new QAction(QString::fromLocal8Bit("設備控制 "), externMenu);
auto videoAction = new QAction(QString::fromLocal8Bit("視頻監控 "), externMenu);
auto systemCopyAction = new QAction(QString::fromLocal8Bit("系統備份 "), externMenu);
// 添加選單
externMenu->addAction(controlAction);
externMenu->addAction(videoAction);
externMenu->addAction(systemCopyAction);
// 動作信號槽連接
connect(controlAction, SIGNAL(triggered()), this, SLOT(slotActionShow()));
connect(videoAction, SIGNAL(triggered()), this, SLOT(slotActionShow()));
connect(systemCopyAction, SIGNAL(triggered()), this, SLOT(slotActionShow()));
ui.tlbExtern->setMenu(externMenu);
}
// 信號槽連接
void QToolButtonDemo::signalSlotConnect()
{
connect(ui.tlbProgram, SIGNAL(clicked()), this, SLOT(slotToolButtonProgram()));
connect(ui.tlbDebug, SIGNAL(clicked()), this, SLOT(slotToolButtonDebug()));
connect(ui.tlbExtern, SIGNAL(clicked()), this, SLOT(slotToolButtonExtern()));
connect(ui.tlbParam, SIGNAL(clicked()), this, SLOT(slotToolButtonParam()));
connect(ui.tlbLog, SIGNAL(clicked()), this, SLOT(slotToolButtonLog()));
}
void QToolButtonDemo::slotToolButtonProgram()
{
selectToolButton(ui.tlbProgram);
}
void QToolButtonDemo::slotToolButtonDebug()
{
selectToolButton(ui.tlbDebug);
}
void QToolButtonDemo::slotToolButtonParam()
{
selectToolButton(ui.tlbParam);
}
void QToolButtonDemo::slotToolButtonLog()
{
selectToolButton(ui.tlbLog);
}
void QToolButtonDemo::slotToolButtonExtern()
{
selectToolButton(ui.tlbExtern);
}
void QToolButtonDemo::slotActionShow()
{
QMessageBox::information(this, QString::fromLocal8Bit("按鍵選單演示"), QString::fromLocal8Bit("按鍵選擇觸發"), QMessageBox::Yes);
}
// 按鍵選擇
void QToolButtonDemo::selectToolButton(QToolButton *pTlb)
{
if (ui.tlbProgram == pTlb)
{
ui.stackedWidget->setCurrentIndex(0);
ui.tlbProgram->setChecked(true);
ui.tlbDebug->setChecked(false);
ui.tlbParam->setChecked(false);
ui.tlbLog->setChecked(false);
ui.tlbExtern->setChecked(false);
}
else if (ui.tlbDebug == pTlb)
{
ui.stackedWidget->setCurrentIndex(1);
ui.tlbProgram->setChecked(false);
ui.tlbDebug->setChecked(true);
ui.tlbParam->setChecked(false);
ui.tlbLog->setChecked(false);
ui.tlbExtern->setChecked(false);
}
else if (ui.tlbParam == pTlb)
{
ui.stackedWidget->setCurrentIndex(2);
ui.tlbProgram->setChecked(false);
ui.tlbDebug->setChecked(false);
ui.tlbParam->setChecked(true);
ui.tlbLog->setChecked(false);
ui.tlbExtern->setChecked(false);
}
else if (ui.tlbLog == pTlb)
{
ui.stackedWidget->setCurrentIndex(3);
ui.tlbProgram->setChecked(false);
ui.tlbDebug->setChecked(false);
ui.tlbParam->setChecked(false);
ui.tlbLog->setChecked(true);
ui.tlbExtern->setChecked(false);
}
else if (ui.tlbExtern == pTlb)
{
ui.stackedWidget->setCurrentIndex(4);
ui.tlbProgram->setChecked(false);
ui.tlbDebug->setChecked(false);
ui.tlbParam->setChecked(false);
ui.tlbLog->setChecked(false);
ui.tlbExtern->setChecked(true);
}
}
6、全部代碼下載
本次demo下載鏈接:https://download.csdn.net/download/u013083044/14962734
轉載請註明出處,本文鏈接:https://www.uj5u.com/qita/254847.html
標籤:其他
下一篇:Linux下BMP圖片添加水印
