QToolBar中设置三态QToolButton按钮

首先,我这个其实是模仿VS Code那个左侧菜单栏做的,看一下目标效果:先分析一下,这是一个状态栏,由按钮组成,按钮有三个状态:正常(灰),鼠标悬浮(白),点击后(白+竖线)

这是最后的效果:
我这个是不是模仿的很逼真?

需要准备的东西:

1.知道原VS code工具栏的背景色,是rgb(51,51,51);
2.准备好每个按钮的三态图片,我是从百度上挑的几张按钮图标,再使用PhotoShop进行颜色变化,背景透明处理,白色竖线添加,拿一个图标举例如下:
正常状态:
点击后的状态(颜色比较浅,仔细看)
鼠标悬浮状态(也是比较浅的颜色)

这里来说一下实现思路:

1.选择QToolBar作为工具栏

2.至于按钮,这里选择QToolButton,
因为:(1):QToolButton没有边框,QPushButton有边框(虽然你可以设置为Flat,但那样也有很多麻烦),(2):QToolButton的QSS属性有一个叫border-image,可以在:hover等伪装态时修改,从而达到修改图标颜色的效果,但QPushButton的qproperty-icon这个QSS属性无法在伪装态的样式表中修改,只能调用相关接口,没有样式表简单.
结论就是用QToolButton实现,图标使用QSS的border-image属性来实现(这对于图像的要求比普通的icon要高,你要1.调整背景图片中实际图标的比例,这里涉及PS里的调整画布大小,2.每个状态中背景图片的图案的颜色,3.把背景图片的背景变透明)

3.设置正常状态和悬浮状态都是常规操作,这里不罗嗦,基础的QSS使用.但是点击后那个有点小问题,:pressed这个伪装态只能设置点击一瞬间的样式,如果你通过设置:pressed,效果是这样的:
这里我看了一些别的博客,发现最后只能用信号来机制解决了,信号是工具栏上的按钮被点击clicked,那么槽函数呢?
要解决两个问题:(1):把上次点击的按钮恢复为正常状态的背景图片,(2)把被点击的按钮设置为点击状态的背景图片.
那怎么确定上次点击的按钮呢?难道还要再定义个变量chosen_button来确定?
还有,样式表每次都是覆盖式设置,你不能只设置部分控件的样式,只要setStyleSheet(),那就要所有都设置一遍.
解决方案:直接在槽函数把所有控件重新设置一遍,简单粗暴.

最后上源码(里面还有一些小细节):

//获取工具栏;toolbar_v=addToolBar("");//因为我们不是用ui,所以要设置ObjectName来作为QSS用的idtoolbar_v->setObjectName("toolbar_v");toolbar_v->setAllowedAreas(Qt::LeftToolBarArea);toolbar_v->setOrientation(Qt::Vertical);toolbar_v->setMovable(false);//设置最大宽度,要不然它总是expandtoolbar_v->setMaximumWidth(123);toolbar_v->setMinimumHeight(1980);//资源管理器按钮manage=new QToolButton(this);//一定要设置ObjectName,否则没法用样式表manage->setObjectName("manage");//编辑按钮edit=new QToolButton(this);edit->setObjectName("edit");//主页按钮:home=new QToolButton(this);home->setObjectName("home");//设置按钮:set=new QToolButton(this);set->setObjectName("set");//添加到工具栏上toolbar_v->addWidget(manage);toolbar_v->addWidget(edit);toolbar_v->addWidget(home);toolbar_v->addWidget(set);//设置按下按钮的槽函数,这里先做了样式方面的设置:connect(manage,&QToolButton::clicked,[=](){setStyleSheet("QToolBar QToolButton{""color:white;""font-size:20px;""min-width:123px;""min-height:123px}""""#manage{""border-image: url(:/images/menu_pressed);}""""#edit{""border-image: url(:/images/edit_normal);}""#edit:hover{""border-image:url(:/images/edit_hover);}""""#home{""border-image: url(:/images/home_normal);}""#home:hover{""border-image:url(:/images/home_hover);}""""#set{""border-image: url(:/images/set_normal);}""#set:hover{""border-image:url(:/images/set_hover);}""""#toolbar_v{""background-color:rgb(51,51,51);}""");});connect(edit,&QToolButton::clicked,[=](){setStyleSheet("QToolBar QToolButton{""color:white;""font-size:20px;""min-width:123px;""min-height:123px}""""#manage{""border-image: url(:/images/menu_normal);}""#manage:hover{""border-image:url(:/images/menu_hover);}""""#edit{""border-image: url(:/images/edit_pressed);}""""#home{""border-image: url(:/images/home_normal);}""#home:hover{""border-image:url(:/images/home_hover);}""""#set{""border-image: url(:/images/set_normal);}""#set:hover{""border-image:url(:/images/set_hover);}""""#toolbar_v{""background-color:rgb(51,51,51);}""");});connect(home,&QToolButton::clicked,[=]{this->hide();});//最后,设置一遍状态下的样式this->setStyleSheet("QToolBar QToolButton{""color:white;""font-size:20px;""min-width:123px;""min-height:123px}""""#manage{""border-image: url(:/images/menu_normal);}""#manage:hover{""border-image:url(:/images/menu_hover);}""""#edit{""border-image: url(:/images/edit_normal);}""#edit:hover{""border-image:url(:/images/edit_hover);}""""#home{""border-image: url(:/images/home_normal);}""#home:hover{""border-image:url(:/images/home_hover);}""""#set{""border-image: url(:/images/set_normal);}""#set:hover{""border-image:url(:/images/set_hover);}""""#toolbar_v{""background-color:rgb(51,51,51);}""");