QT-ToolButton定制界面左侧选项卡

企业开发 2021-01-31 10:11:44 阅读次数: 0

QT-ToolButton定制界面左侧选项卡

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

猜你喜欢

转载自blog.csdn.net/u013083044/article/details/113428541
今日推荐
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
周排行
BPM为企业带来的实际利益
好程序员web前端分享css常用属性缩写
Java文件下载（excel）
css样式的动态添加及显示和隐藏等零碎用法
axios全局配置以及拦截器
使用Logstash来实时同步MySQL和log日志数据到ES
C++获取当前时间（年月日、时分秒、毫秒）
Odoo产品分析 (四) -- 工具板块(11) -- 网站即时聊天(1)
Java环境配置正确，但是java、javac、java -version均返回“不是内部或外部命令，也不是可运行的程序或批处理文件”？
01 官网下载各种CentOS教程（超详细版）
每日归档
更多
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022