QT-ToolButton定制界面左侧选项卡（简单好看）

已于 2022-04-13 21:48:09 修改
阅读量7.3k 收藏 101
点赞数 10
分类专栏： Qt 文章标签： qt css gui c++
于 2021-01-30 14:26:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013083044/article/details/113428541
版权

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

进击的大海贼
关注
  • 10
    点赞
  • 踩
  • 101
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 6
    评论
专栏目录
Qt——Qt控件之容器-QTabWidget选项卡控件的使用总结（例程：Qt标题栏多页面切换 选项卡切换页面）
数字世界 万物互联
06-09 2215
本次博文开始总结下Qt的QTabWidget选项卡控件，QTabWidget 继承 QWidget，提供了一组选项卡（多页面）小部件。 QTabWidget主要是用来分页显示的，每一页一个界面，众多界面公用一块区域，节省了界面大小，可以方便的为用户显示更多的信息，这个是比较常用的一个容器控件，有点像浏览器标签页面。
QT QTabWidget 使用
热门推荐
houxian1103的博客
03-02 2万+
QTabWidget 为选项卡小部件，提供一个选项卡栏（参见 QTabBar）和一个“页面区域”，用于显示与每个选项卡相关的页面。默认情况下，选项卡栏显示在页面区域的上方，但是可以使用不同的配置（请参见 TabPosition）。每个选项卡都与不同的小部件（称为页面）相关联。页面区域中只显示当前页面；其他所有页面都隐藏。用户可以通过单击其选项卡或按 Alt+ 字母快捷键（如果有）来显示不同的页面。使用 QTabWidget 的正常方法是执行以下操作:创建一个 QTabWidget。
《QT从基础到进阶·三十七》QWidget实现左侧导航栏效果
cs1395293598的博客
11-22 1610
（3）通过addMenuWidget设置第一个界面为"MTF"，第二个参数0表示把该界面放在第一个标签上显示，第三个参数拿到mtf的界面传入放置到导航栏的m_centerQVBoxLayout布局中。NavigationBarPlugin插件类实现了对左侧导航栏的管理，我们可以在导航栏插件中添加界面，并用鼠标点击导航栏能够切换对应的界面。我们先把导航栏框架添加添加到主界面的左边，然后在主界面右边设置一个布局用于后面显示界面。（4）同理下面依次添加第二个标签和放置第二个界面，添加第三个标签放置第三个界面。
QT 如何设置 QToolButton 显示图片和下拉菜单
最新发布
qq_60392176的博客
06-14 247
然后，它被添加到一个名为。的下拉菜单，并连接这些动作的。的下拉菜单并选择“New”时，对象中，该对象随后被设置为。
QT-左框选项卡软件界面框架
u013083044的博客
03-31 404
【代码】QT-左框选项卡软件界面框架。
Qt导航栏Demo之侧边垂直菜单
02-17
Qt自带菜单栏为水平菜单栏，在很多实际应用中，需要用到左侧菜单导航栏，即垂直导航栏，本示例使用QMenu、QDialog、事件过滤、QPushButton、鼠标钩子函数等实现了侧边垂直菜单导航栏。
Qt应用开发(基础篇)——选项卡窗口 QTabWidget
波塞冬的博客
08-17 3613
QTabWidget类继承于QWidget，是一个拥有选项卡的窗口部件。QTabWidget类有一个选项卡栏QTabBar和一个页面区域，用来显示和选项卡相关联的界面。用户通过点击选项卡或者自定义快捷方式(ALT+Key)切换页面。
QT系统学习系列：1.3 ToolButton（工具按钮）
花狗Fdog的博客
01-28 2万+
文章目录一. ToolButton 基础ToolButton介绍ToolButton 构造函数二. ToolButton 进阶arrowType属性autoRaise属性popupMode属性toolButtonStyle属性继承属性关于ToolButton 按钮的简单美化三. ToolButton 高级ToolBar工具栏和ToolButton工具按钮的应用ToolButton 菜单 一. ToolButton 基础 ToolButton介绍 头文件：#include qmake：QT +=wid
test-toolbutton.rar qt 测试toolbutton代码
01-16
`QToolButton`是Qt GUI框架中一个重要的控件，它通常用于创建工具栏或类似快捷方式的按钮，提供了丰富的功能和自定义选项。这个压缩包文件"test_toolbutton.rar"包含了一个用于测试`QToolButton`功能的代码示例。 ...
qt-opensource-linux-x64-5.12.12.run
07-12
Qt（官方发音 [kju:t]，音同 cute）是一个跨平台的 C++ 开发库，主要用来开发图形用户界面（Graphical User Interface，GUI）程序，当然也可以开发不带界面的命令行（Command User Interface，CUI）程序。...
QT-deployment-tool
09-07
linux操作系统下的QT打包部署工具。
Qt-unified-windows-x64-4.6.0-online安装Qt
07-31
Qt是一个强大的跨平台应用程序开发框架，专为创建图形用户界面（GUI）和其他类型的应用程序而设计。它广泛应用于桌面、移动和嵌入式系统中，支持Windows、Linux、macOS等多个操作系统。在本主题中，我们将详细介绍...
qt-everywhere-opensource-src-4.8.7.7z
01-17
QT是著名的跨平台应用程序开发框架，它被广泛用于创建图形用户界面和其他软件。"qt-everywhere-opensource-src-4.8.7.7z" 是一个包含QT库开源源代码的压缩文件，版本为4.8.7，格式为7z。这个版本可能在发布时是最...
【Qt设计中常见控件、布局选项和属性详解】
qq_43326668的博客
05-26 2410
Qt是一种跨平台的应用程序开发框架，由Qt Company开发。它提供了丰富的工具和功能，用于开发图形用户界面（GUI）应用程序。Qt采用C++编写，并提供了多种语言的绑定，如Python、Java等，使开发者能够在不同的操作系统上使用相同的代码。Qt的设计理念是"写一次，到处运行"，这意味着开发者可以在不同的平台上部署他们的应用程序，包括Windows、macOS、Linux等。
【Qt】QTabWidget 选项卡编辑器（编辑选项卡名称）
Fanjufei的博客
02-21 198
是 Qt 框架中提供的一个用于显示带有选项卡的多页面容器部件。它可以让用户在不同的选项卡之间切换，并在每个选项卡中显示不同的内容。可以与其他布局管理器结合使用，实现灵活的界面布局，例如在每个选项卡中使用不同的布局。支持信号与槽机制，可以响应选项卡切换等事件，使程序可以根据用户操作进行相应的处理。方法可以获取当前显示的选项卡的索引，从而可以根据需要操作当前选项卡。中添加一个新的选项卡，并指定要显示的内容和选项卡的标签。的外观，包括选项卡的样式、背景色等。方法可以移除指定位置的选项卡。
Qt Quick 常用元素：TabView(选项卡) 与 Slider(滑块)
m0_60259116的博客
03-02 1365
Qt Quick 常用元素：TabView(选项卡) 与 Slider(滑块)
【QT】QSS美化——Buttons篇
Jason的技术探索与分享
03-04 7739
Buttons篇QSS美化 QPushButton、QToolButton、QCheckBox、QRadioButton
Qt、使用QToolButton和QStackedWidget的侧边栏（SideBar）的实现与实现原理解析
^_^
01-03 1万+
侧边栏是一个很常用的导航控件，如Qt Creator软件本身也使用到了侧边栏：目前使用Qt做出这种侧边导航栏，常见的做法是使用QListWidget加QStackedWidget，但是使用QListWidget做侧边的这个导航很不灵活，想要复刻出和Qt Creator这个侧边栏同样的效果很费劲，所以本篇博客采用QToolButton加QStackedWidget形式，在用QSS进行美化以达到效果。
QT-C++ 注册机软件，生成机器码和注册码，支持授权时间
u013083044的博客
07-13 1万+
1、编译环境： 本程序使用的编译环境是QT5.12.0和VS2017，如果你安装环境不用，你可以通过阅读里面的程序代码，进行代码有效的提取，然后你再自己创建工程进行编译使用。2、基本描述： 通过获取计算机的硬件信息，然后通过加密组成，生成每个计算机的唯一机器码，类似的方式，按照内部定义的规则，生成相应的组册码。获取本地计算机的一些基本信息，这样来构成每个机器码的唯一性。 2.应用层调用 外部应用层进行逻辑功能的操作 程序链接 https://download.csdn.net/download/u0130
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

进击的大海贼

联系博主，为您提供有价值的资源

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值