qss设置平面按钮_QToolButton设置QSS

最新推荐文章于 2024-08-23 14:27:21 发布
最新推荐文章于 2024-08-23 14:27:21 发布
阅读量994 收藏
点赞数
文章标签： qss设置平面按钮
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_36321633/article/details/113521377
版权
这篇博客详细介绍了如何使用QSS为QToolButton设置样式，包括正常状态、悬停状态、按下状态和选中状态的背景色、边框、圆角以及渐变效果。还特别提到了消除菜单指示器并自定义菜单项选中时的样式。
摘要由CSDN通过智能技术生成

QToolButton设置QSS

.QPushButton,.QToolButton{

border-style:none;

border:1px solid #B2B6B9;

color:#000000;

padding:5px;

min-height:15px;

border-radius:5px;

background:qlineargradient(spread:pad,x1:0,y1:0,x2:0,y2:1,stop:0 #E1E4E6,stop:1 #CCD3D9);

}

.QPushButton:hover,.QToolButton:hover{

background:qlineargradient(spread:pad,x1:0,y1:0,x2:0,y2:1,stop:0 #F2F3F4,stop:1 #E7E9EB);

}

.QPushButton:pressed,.QToolButton:pressed{

background:qlineargradient(spread:pad,x1:0,y1:0,x2:0,y2:1,stop:0 #E1E4E6,stop:1 #CCD3D9);

}

.QToolButton::menu-indicator{

image:None;

}

QToolButton#btnMenu,QToolButton#btnTool,QPushButton#btnMenu_Min,QPushButton#btnMenu_Max,QPushButton#btnMenu_Close{

border-radius:3px;

color:#000000;

padding:3px;

margin:0px;

background:none;

border-style:none;

}

QToolButton#btnMenu:hover,QPushButton#btnMenu_Min:hover,QPushButton#btnMenu_Max:hover{

color:#FFFFFF;

margin:1px 1px 2px 1px;

background-color:rgba(51,127,209,230);

}

/*QToolButton#btnTool:hover{

color:#FFFFFF;

margin:1px 1px 2px 1px;

background-color:rgba(51,127,209,230);

}*/

QToolButton#btnTool:hover{ /*鼠标放上后*/

color:rgb(255, 255, 255);

min-height:20;

border-style: solid;

border-top-left-radius:2px;

border-top-right-radius:2px;

background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop:0 rgb(226,236,241), stop: 0.3 rgb(160,160,160), stop: 1 rgb(120,120,120));

border:1px;

border-radius:5px;

padding:2px 4px;

}

QToolButton#btnTool:pressed{ /*按下按钮后*/

color:rgb(255, 255, 255);

min-height:20;

border-style:solid;

border-top-left-radius:2px;

border-top-right-radius:2px;

background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop:0 rgb(226,236,241), stop: 0.3 rgb(190,190,190), stop: 1 rgb(160,160,160));

border:1px;

border-radius:5px;

padding:2px 4px;

}

QToolButton#btnTool:checked{ /*选中后*/

color:rgb(255, 255, 255);

min-height:20;

border-style:solid;

border-top-left-radius:2px;

border-top-right-radius:2px;

background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop:0 rgb(226,236,241), stop: 0.3 rgb(190,190,190), stop: 1 rgb(160,160,160));

border:1px;

border-radius:5px;

padding:2px 4px;

}

QMenu::icon:checked {

background: #a3d1ff;

border: 1px solid #3399ff;

position: absolute;

top: 1px;

right: 1px;

bottom: 1px;

left: 1px;

}

穆穆勒
关注
QT:QSS自定义QToolButton实例
希望我的博客，能帮上你解决学习中工作中所遇到的问题
07-02 1095
QT:QSS自定义QToolButton实例
QT中常用的GUI组件之一是QToolButton，它是一个按钮，通常带有一个图标和文本
ByteJolt的博客
08-22 571
QT中常用的GUI组件之一是QToolButton，它是一个按钮，通常带有一个图标和文本。在本文中，我们将介绍如何使用QSS自定义QToolButton样式。QSS是Qt Style Sheet的缩写，是一种基于Cascading Style Sheets (CSS)的样式表语言，用于控制Qt应用程序的外观和布局。除此之外，我们还可以通过QSS设置其他属性，例如文字大小、字体等等，让按钮的外观更加具有吸引力。以上代码会将背景颜色设置为蓝色，边框设为无，字体颜色设为白色，内边距设为5像素。
QToolBar中使用样式表QSS设置三态QToolButton按钮
热门推荐
realliyuhao的博客
06-26 1万+
QToolBar中设置三态QToolButton按钮 首先,我这个其实是模仿VS Code那个左侧菜单栏做的,看一下目标效果:先分析一下,这是一个状态栏,由按钮组成,按钮有三个状态:正常(灰),鼠标悬浮(白),点击后(白+竖线) 这是最后的效果: 我这个是不是模仿的很逼真? 需要准备的东西: 1.知道原VS code工具栏的背景色,是rgb(51,51,51); 2.准备好每个按钮的三态图片,我是从百度上挑的几张按钮图标,再使用PhotoShop进行颜色变化,背景透明处理,白色竖线添加,拿一个图标举例如下:
Qt控件-QToolButton用法
weixin_38834817的博客
08-23 425
和都继承自，因此它们共享一些基本的特性和方法，如设置图标、文本、连接信号和槽等。然而，提供了额外的功能，使其更适合在工具栏中使用，而更适合需要明确文本标签的常规按钮场景。
QT之qss教程-QToolButton
wzs的博客
11-13 6786
QToolButton { border:2px solid #124d92; border-radius:5px; background-color:yellow; min-width:60px; min-height:40px; } QToolButton[pupupMode="1"] { padding-right:20px; } /* 鼠标按下时 */ QToolButto
QToolButton设置QSS
$firecat利白的代码足迹$
06-24 4830
QToolButton设置QSS .QPushButton,.QToolButton{ border-style:none; border:1px solid #B2B6B9; color:#000000; padding:5px; min-height:15px; border-radius:5px; background:qlineargradient(spread:pad,x1:0,y1:0,x2:0,y2:1,stop:0 #E1E4E6,stop:1 #CCD3D9); } .QPushBu
QToolButton用法记录
琅嬛福地
12-20 1222
（1）toolButton的大小，需要结合图标的大小，以及文本的大小来设置，例如上面的代码，图标64*64，文本24px, 整个控件的高度大概90。QToolButton是工具按钮，可以设置图标、文本，也可以结合qss灵活设置样式，例如下面的效果。（3）文本与图标的位置关系设置。（5）文本大小，使用qss设置。可以根据自己的需求设置。
Qt之使用QSS设置QPushButton图标和文本的位置
草上爬的博客
08-11 8848
Qt之使用QSS设置QPushButton图标和文本的位置，本文将演示如何使用样式表控制按钮中的图标和本文。
Qt：Qss 样式设置（01）- Buttons
qq_40944577的博客
06-02 879
Qt Button Qss
qtdesigner设置按钮样式_Qt自定义窗体系统按钮
weixin_39608394的博客
01-30 924
首先可以使用setWindowFlags(Qt::FramelessWindowHint); 来隐藏窗体的标题栏, 当然也包括了默认的系统按钮.然后在可以通过代码或者Qt的Designer在窗体右上角摆放好最小化, 最大化(还原), 和关闭三个按钮并关联好信号槽. 分别设置三个按钮的QSSQToolButton#toolButtonMin{border-image: url(:/images/m...
【QT】QSS美化——Buttons篇
Jason的技术探索与分享
03-04 8923
Buttons篇QSS美化 QPushButton、QToolButton、QCheckBox、QRadioButton
QToolButton 的扩展、多样化
08-23
Qt 之QToolButton 实现QQ界面按钮效果、重新设置QToolButton菜单按钮区域的新功能。
Qt QPushButton 按钮美化
kanyun123的博客
04-04 7096
Qt 默认的QPushButton 样式是操作系统的样式,如果想要扁平化的按钮样式,最简单的是通过Qss来进行设置。 首先通过代码,设置 QPushButton::setFlat(true) 然后编辑Qss文件 QPushButton { background: transparent; border:none; } 这里需要注意的是,除了要设置background: tr...
QT-ToolButton定制界面左侧选项卡（简单好看）
u013083044的博客
01-30 7638
QT-ToolButton定制界面左侧选项卡1、效果预览2、窗体初始化3、设置按键信号连接和按键互斥显示4、添加qss界面美化5、关键类头文件和源文件6、全部代码下载 1、效果预览 2、窗体初始化 初始化toolbutton状态属性，设置支持选中状态，堆栈窗口默认也选中第0个索引。 添加按键弹出菜单，把一些拓展的其他窗体添加到拓展按键里面，方便后续选项卡项添加。 // 初始化窗体 void QToolButtonDemo::initForm() { // 设置toolbutton可选择状态
使用QToolButton和QStackedWidget的侧边栏（SideBar）的实现与实现原理解析
宁静致远的博客
04-25 2499
目前使用Qt做出这种侧边导航栏，常见的做法是使用QListWidget加QStackedWidget，但是使用QListWidget做侧边的这个导航很不灵活，想要复刻出和Qt Creator这个侧边栏同样的效果很费劲，所以本篇博客采用QToolButton加QStackedWidget形式，在用QSS进行美化以达到效果。Qt Creator的侧边栏是图标加文字的形式，并且文字在图标下方，首先想到的就是QToolButton。以上效果可以通过QSS实现。4、代码实现界面的切换。
QToolButton
枫影竹韵的博客
01-29 993
1.设置按钮按下保持 通常设置按钮press样式后，当你点击离开后，按钮又恢复成了未按下时的状态。 想要按钮按下后保持press样式下的样式，操作如下： 1、将所有按钮的如下的两个状态均选中 2、在每个按钮的槽函数后面加上setDown()函数，如下我的3个按钮， void MainWindow::on_toolButton_3_clicked() { ui->toolButton->setDown(false); ui->toolButton_2->
qt5的设置QToolButton下拉菜单时按钮上的小三角位置
mengtianwxs的专栏
02-28 5579
QLabel{color:white;} QTabWidget{ background:white; } QTabBar::tab{ background:green; color:white; height:22px; } QTabWidget{ border: 1px solid; } QTabWidget::tab-bar{ left:50px; border:2px; } QTab...
十六、QToolButton添加action后出现的下拉菜单按钮上的小三角位置
panchang199266的博客
07-22 2520
一、不显示小三角 QToolButton::menu-indicator { image: none; } 二、小三角居中显示 QToolButton::menu-indicator:image { subcontrol-origin: margin; subcontrol-position: bottom center; margin-top: 5px; }
QToolButtom、QPushButtom添加QMenu后去掉右下角三角图标
weixin_43246170的博客
12-28 2658
QToolButtom和QPushButtom添加QMenu后会出现右下角图标， QMenu* menu = new QMenu(this); QAction* ac1 = new QAction(“1”,menu); QAction* ac2 = new QAction(“2”,menu); menu->addAction(ac1); menu->addAction(ac2); QToolButton* m_btn = new QToolButton(this); m_btn->setP
设置QToolButton disable的qss样式
最新发布
09-26
设置`QToolButton`（工具按钮）为disable状态的Qt Quick Style Sheets（QSS，Qt StyleSheet）样式通常涉及到修改` QPushButton `的样式，因为` QToolButton `继承自` QPushButton `。在QSS中，你可以通过选择器选择...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值