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
今日推荐
周排行
浏览器的兼容问题[转]
WBS工作分解结构的说明与分解细则
写 链表 注意事项
nginx 配置转发
python环境变量、python当前工作目录。：：：：：：：：概念详解：：：：：：：：：
ubuntu mysql手动安装及简明配置
2018-11-14 MIDI音乐格式笔记学习
Hadoop HDFS 集群安全模式
2017-2018-2偏微分方程复习题解析7
息县装修“化妆台的选择”
每日归档
更多
2025-01-29(0)
2025-01-28(0)
2025-01-27(0)
2025-01-26(0)
2025-01-25(0)
2025-01-24(0)
2025-01-23(0)
2025-01-22(0)
2025-01-21(0)
2025-01-20(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022