QToolBar中使用样式表QSS设置三态QToolButton按钮

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(),那就要所有都设置一遍.

解决方案1:直接在槽函数把所有控件重新设置一遍,简单粗暴.
上源码(里面还有一些小细节,QSS属性名称及值格式,函数接口注意点,建议看一看注释):

//获取工具栏;
    toolbar_v=addToolBar("");
    //因为我们不是用ui,所以要设置ObjectName来作为QSS用的id
    toolbar_v->setObjectName("toolbar_v");
    toolbar_v->setAllowedAreas(Qt::LeftToolBarArea);
    toolbar_v->setOrientation(Qt::Vertical);
    toolbar_v->setMovable(false);
    //设置最大宽度,要不然它总是expand
    toolbar_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);}"
                        ""
                        );

这种方法解决这个问题是没有问题,但一些缺点很明显:
1.假如我的窗口还要设置其它控件的样式,那每次都重新复制粘贴,再修改目标段落,要求我要对整个样式表很清楚,但前面写的还要时刻记着浪费时间复习.
2.同样的,每次都要复制,粘贴,太占地方,复杂,降低了整个代码的可读性,所以:

解决方法2:对上一个方法的优化,可以减少代码行数,方便样式表的扩展.
我在主窗口类中定义一个globel_styleString的QString变量,用来储存总的样式字符串,
再定义一个函数:void add_styleString(QString partial_styleString);
每次我修改某个部分样式表,就调用该方法,传参为该部分的样式表字符串.
在该函数内部进行字符串拼接,将该部分字符串拼接至全局样式字符串中,然后在我的add_styleString()方法内部调用setStyleSheet()函数.
用这个方法,解决了控件扩展和控件更新的样式字符串更新问题.
代码如下:

类的头文件中相关部分定义和声明如下:

//一些成员变量
    QToolBar *toolbar_v=NULL;
        QString toolbar_v_styleString;
        QToolButton *manage =NULL;
        QToolButton *edit=NULL;
        QToolButton *home=NULL;
        QToolButton *set=NULL;
    QTabWidget *tabwidget=NULL;
    QTreeView *treeview=NULL;


    /*因为样式表字符串只能有一个,
     * 这里我采用拼接的方式,有一个总样式表,
     * 每次新添加样式表,就添加到总样式表字符串中
     * 最后直接设置总样式就行
    */
    QString globel_styleString="";
    //用来设置样式表的函数:
public:
    void add_styleString(QString);

该头文件对应cpp文件相关部分如下:

Note_MainWindow::Note_MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::Note_MainWindow)
{
    ui->setupUi(this);
    //1301:工具栏准备工作
    //获取工具栏;
    toolbar_v=addToolBar("");
    //因为我们不是用ui,所以要设置ObjectName来作为QSS用的id
    toolbar_v->setObjectName("toolbar_v");
    toolbar_v->setAllowedAreas(Qt::LeftToolBarArea);
    toolbar_v->setOrientation(Qt::Vertical);
    toolbar_v->setMovable(false);
    //设置最大宽度,要不然它总是expand
    toolbar_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,[=](){
        //因为实际中按下按钮保持效果的只有两个,所以我可以只重新说明这两个按钮的样式字符串就好
        add_styleString(
                      "#manage{"
                      "border-image: url(:/images/menu_pressed);}"
                      "#manage:hover{"
                      "border-image:url(:/images/menu_pressed);}"
                      ""
                      "#edit{"
                      "border-image: url(:/images/edit_normal);}"
                      "#edit:hover{"
                      "border-image:url(:/images/edit_hover);}");
    });
    connect(edit,&QToolButton::clicked,[=](){
        add_styleString(
                      "#manage{"
                      "border-image: url(:/images/menu_normal);}"
                      "#manage:hover{"
                      "border-image:url(:/images/menu_hover);}"
                      ""
                      "#edit{"
                      "border-image: url(:/images/edit_pressed);}"
                      "#edit:hover{"
                      "border-image:url(:/images/edit_pressed);}"
                      );
    });
    
    connect(home,&QToolButton::clicked,[=]{
            this->hide();});
    
    //这个是toolbar的基础样式字符串
    QString basic_toolbar_styleString="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);}"
                                      "#manage:pressed{"
                                      "border-image:url(:/images/menu_pressed);}"
                                      ""
                                      "#edit{"
                                      "border-image: url(:/images/edit_normal);}"
                                      "#edit:hover{"
                                      "border-image:url(:/images/edit_hover);}"
                                      "#edit:pressed{"
                                      "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);}"
                                      "";
    add_styleString(basic_toolbar_styleString);
    //1301:工具栏准备工作完成



}

//设置样式表的函数,只要样式表有变化,就调用该方法
//直接将改变部分的样式字符串传进来就好
void Note_MainWindow::add_styleString(QString partial_styleString){
    globel_styleString+=partial_styleString;
    this->setStyleSheet(globel_styleString);

}

Note_MainWindow::~Note_MainWindow()
{
    delete ui;
}