Customization of push button



  • Hi all, I would like to create a row of buttons with customizing background and without any boundary lines, just like the following effect:

    alt text

    However, all I can get is:

    alt text

    with the following code:

            drawArrowBtn->move(x + width - 8 * 32, y + height);
            textEditBtn->move(x + width - 7 * 32, y + height);
            drawEllipseBtn->move(x + width - 6 * 32, y + height);
            drawRectBtn->move(x + width - 5 * 32, y + height);
            drawLineBtn->move(x + width - 4 * 32, y + height);
            saveAsBtn->move(x + width - 3 * 32, y + height);
            cancelBtn->move(x + width - 2 * 32, y + height);
            confirmBtn->move(x + width - 32, y + height);
    
            QPixmap arrow("://icons/arrow.png");
            QPixmap text("://icons/text.png");
            QPixmap ellipse("://icons/ellipse.png");
            QPixmap rect("://icons/rectangle.png");
            QPixmap line("://icons/pen.png");
            QPixmap save("://icons/save.png");
            QPixmap cancel("://icons/cancel.png");
    
            drawArrowBtn->setIcon(QIcon(arrow));
            textEditBtn->setIcon(QIcon(text));
            drawEllipseBtn->setIcon(QIcon(ellipse));
            drawRectBtn->setIcon(QIcon(rect));
            drawLineBtn->setIcon(QIcon(line));
            saveAsBtn->setIcon(QIcon(save));
            cancelBtn->setIcon(QIcon(cancel));
            //confirmBtn->setIcon(QIcon(confirm));
    
            textEditBtn->show();
            drawArrowBtn->show();
            drawEllipseBtn->show();
            drawRectBtn->show();
            drawLineBtn->show();
            saveAsBtn->show();
            cancelBtn->show();
            confirmBtn->show();
    

    I tried to read books and references on the properties of QPushButton, but still have no idea what should I do to dim the bounding box of push buttons. Also, I was aiming to create a continuous row of buttons, but there's always a gap between them.

    Did I use a wrong widget? I mean all the push buttons I saw are raised up with a rounding box, perhaps I shouldn't use the class? Could anyone please give some suggestions?





  • @David406

    Hi,

    the better way to solve this issue:
    First, using A QLayout that way you dont have to move your buttons individually and they adjust to changes in size automaticaly.

    Second, set the Picture via a StyleSheet like @mostefa suggested: setStyleSheet("QPushButton{border-image:url(pathToImg/img.png)}");

    You have the space between the buttons because, the Icon is not the whole PushButton

    To have the buttons, when inside a Layout, right next to each other, remember to set the spacing to 0.



  • @David406
    maybe QToolButton is another choice?



  • @J.Hilk
    Thanks a lot. Your suggestions are very helpful. But I also would like to move the layout widget to a give position. However, QHBoxLayout widget do not have this method. Do you have any suggestions?



  • @Flotisable
    Do you mean QToolBar? This seems to be a good choice.



  • @David406 generally, I would suggest to place your whole UI into an interlocking construct of QLayouts.

    But if you dont want to do that,
    You can use a QFrame or QWidet as a parent for the QLayout and move that around.



  • @David406
    no, QToolButton is a special button that is usually used in QToolBar

    you can read the document of QToolButton and QToolBar



  • @David406
    set it for all your button,
    button->setFlat(true);
    it solves your problem.



  • Hi all, thanks for all of your help! I tried to set my buttons flat with
    button->setFlat(true);
    and it looks good. But there is still a problem remained, that is, I can't set
    the background color the these button. I was using stylesheet

    drawArrowBtn->setStyleSheet("QPushButton{background-color:rgb(255, 255, 255)}");
    

    See below:

    alt text

    The background color only come into effect when I click on the button:

    alt text

    Any suggestions?



  • @David406

    are you sure the stylesheet is applied at all? And is this the only place where you set a stylesheet;

    theres a t least a ; missing, what usually results in a stylesheet parsing error.

    drawArrowBtn->setStyleSheet("QPushButton{background-color:rgb(255, 255, 255);}");
    


  • @David406 said in Customization of push button:

    Hi all, thanks for all of your help! I tried to set my buttons flat with
    button->setFlat(true);
    and it looks good. But there is still a problem remained, that is, I can't set
    the background color the these button. I was using stylesheet

    drawArrowBtn->setStyleSheet("QPushButton{background-color:rgb(255, 255, 255)}");
    

    See below:

    alt text

    The background color only come into effect when I click on the button:

    alt text

    Any suggestions?

    Is your QPushButton checkable??

    If yes you need to add stylesheet when button is checked

    I think that this should be something like this:

    QPushButton:checked{background-color: white;};
    


  • @mostefa
    Thanks.
    Yes, my button is checkable.
    I think you mis-understand my intention. I want my buttons to be set with background color of my choice without even pressing it. However, this code

    drawArrowBtn->setStyleSheet("QPushButton{background-color:rgb(255, 255, 255)}");
    

    only works when I push the button (second picture). When the buttons are un-pushed, the background color set in the setStyleSheet does not help in any means (first picture).



  • @David406 said in Customization of push button:

    @mostefa
    Thanks.
    Yes, my button is checkable.
    I think you mis-understand my intention. I want my buttons to be set with background color of my choice without even pressing it. However, this code

    drawArrowBtn->setStyleSheet("QPushButton{background-color:rgb(255, 255, 255)}");
    

    only works when I push the button (second picture). When the buttons are un-pushed, the background color set in the setStyleSheet does not help in any means.

    Ok

    Then what about unchecked property?

    QPushButton:unchecked{background-color: white;};
    


  • @J.Hilk
    Thanks.
    Yes, I'm sure this stylesheet applied. because I leave other button un-setting the stylesheet as a comparison, and it's obviously different:

    alt text



  • @mostefa
    Unfortunately,

    QPushButton:unchecked{background-color: white;};
    

    doesn't help.



  • @David406 said in Customization of push button:

    @J.Hilk
    Thanks.
    Yes, I'm sure this stylesheet applied. because I leave other button un-setting the stylesheet as a comparison, and it's obviously different:

    alt text

    Hi again @David406

    i am not sure that setFlat(true) is really what do you want,

    http://doc.qt.io/qt-5/qpushbutton.html#flat-prop

    The doc actually says:

    If this property is set, most styles will not paint the button background unless the button is being pressed.
    

    And i think that this is your problem,

    So i suggest you to delete the line pushbutton->setFlat(true)

    And setStylesheet of your PushButton as follow

    QPushButton
    {
    border-style: outset;
    background-color: red ;/** for example **/
    }
    

    Keep me informed if this is what you want or no?

    Best regards !



  • @mostefa
    Thanks again.
    Yes, this helped. But there are separators between the buttons which I don't want, see below:

    alt text

    this is also the reason I used setflat(true). Any suggestion to eliminate those separators?



  • @David406

    QPushButton{border: none;}
    


  • @David406 said in Customization of push button:

    this is also the reason I used setflat(true)

    Any suggestion to eliminate those separators?

    How are you adding your buttons?

    With yourPushButton->move(x + width - 8 * 32, y + height);
    why -8*32 ,cause of spacing is maybe here, why just -8 * 32 ?



  • @J.Hilk said in Customization of push button:

    @David406

    QPushButton{border: none;}
    

    AFAIK border: none; will not change anything



  • @mostefa
    Yes, border: none; is the default setting.
    And I want to be able to move those buttons around, so I did not use layout to add these buttons.



  • @mostefa

    Just checked it, it does exactly what the OP want to, it removes the border/bulge of the default QPushButton



  • @J.Hilk
    Yes, I checked it too. This really helped.
    border-style:none; is default, not border:none;
    Thank you all !!!



  • Hi all, I have one more question. How can I let the buttons pushed down when mouse hovers on it, like below:

    alt text

    The arrow button is pushed down when my mouse hovers on it.
    Could you please give some hints on what method to use? There's no hover or enter event for a button.

    Aside: When border is set to none, there would never appear a border even when I pused on it, which is not what I meant to do. Confused!



  • @David406

    QStyleSheet is also here your friend. For example:

    QPushButton:hover{background-color:red;}
    

    Here a link to some examples



  • @J.Hilk
    Oh, yes! Please forgive me, I'm quite new about the usage of stylesheet! So I need to set different stylesheet for normal, hover and pushed status.



  • @David406

    that would be correct:

    a small example:

    ui->myButton->setStyleSheet(
    //Default Button
    "QPushButton{border:none; color: black; background-color:transparent;}"
    //When mose over
    "QPushButton:hover{border: 1px solid grey; color: red; background-color:white;}"
    //When checked
    "QPushButton:checked{border: 1px solid black; color: white; background-color:red;}"
    );
    

Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.