Use style sheet QSS in QToolBar to set three state QToolButton button

Set three state QToolButton button in QToolBar

First of all, I did this by imitating the left menu bar of VS Code to see the target effect:First of all, this is a status bar, which consists of buttons. The buttons have three statuses: normal (gray), mouse hovering (white), after clicking (white + vertical line)

This is the final effect:
Am I imitating this very lifelike?

Things to prepare:

1. Know that the background color of the original VS code toolbar is rgb(51,51,51);
2. Prepare the three state pictures of each button. I select several button icons from Baidu, and then use PhotoShop to change the color. The background is transparent, and the white vertical line is added. Take an example of an icon as follows:
Normal state:
Status after clicking (the color is lighter, look carefully)
Mouse hover status (also a lighter color)

Here is the realization idea:

1. Select QToolBar as the toolbar

2. As for the button, select QToolButton here,
Because: (1) qtoolbutton has no border, QPushButton has a border (although you can set it to Flat, there are many troubles in that way), (2) the QSS property of qtoolbutton has a name of border image, which can be modified in the camouflage state such as hover, so as to achieve the effect of modifying the color of the icon, but the QSS property of QPushButton cannot be modified in the camouflage state style sheet, Only relevant interfaces can be called, without style sheets
The conclusion is that QToolButton is used to implement the icon, and the border image attribute of QSS is used to implement the icon (the requirement for the image is higher than that of ordinary icon, you need to 1. Adjust the proportion of the actual icon in the background image, which involves the adjustment of the canvas size in PS, 2. The color of the background image in each state, 3. Make the background of the background image transparent)

3. Setting the normal state and suspended state are both normal operations. There is no wordiness here. The basic QSS is used. But there is a little problem after clicking: pressed can only be set as a disguised state at the moment of clicking. If you set pressed, the effect is as follows:
Here I read some other blogs, and found that the only way to solve the problem is to use the signal mechanism. The signal is that the button on the toolbar is clicked. What about the slot function?
There are two problems to be solved: (1) restore the last clicked button to the normal background picture; (2) set the clicked button to the clicked background picture
How do you determine the last button you clicked? Do you want to define another variable, chosen_button to confirm?
Also, stylesheets are overridden every time. You can't just style some controls. Just set stylesheet (), you have to set all the styles once
Solution: directly in the slot function to reset all controls, simple and rough

Finally, go to the source code (there are some small details):

//Get toolbar;
    toolbar_v=addToolBar("");
    //Because we are not using ui, we need to set ObjectName as the id of QSS
    toolbar_v->setObjectName("toolbar_v");
    toolbar_v->setAllowedAreas(Qt::LeftToolBarArea);
    toolbar_v->setOrientation(Qt::Vertical);
    toolbar_v->setMovable(false);
    //Set the maximum width, otherwise it will always expand
    toolbar_v->setMaximumWidth(123);
    toolbar_v->setMinimumHeight(1980);

    
    //Explorer button
    manage=new QToolButton(this);
    //Be sure to set ObjectName, otherwise you can't use style sheet
    manage->setObjectName("manage");

    //Edit button
    edit=new QToolButton(this);
    edit->setObjectName("edit");

    //Home button:
    home=new QToolButton(this);
    home->setObjectName("home");

    //Set button:
    set=new QToolButton(this);
    set->setObjectName("set");

    //Add to toolbar
    toolbar_v->addWidget(manage);
    toolbar_v->addWidget(edit);
    toolbar_v->addWidget(home);
    toolbar_v->addWidget(set);

    //Set the slot function of the button to be pressed. Here, we set the style first:
    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();});
           //Finally, set the style in one pass state
             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);}"
                        ""
                        );

Tags: Qt Attribute

Posted on Thu, 25 Jun 2020 23:23:41 -0400 by Daijoubu