Customization of push button

David406

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:

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?

mostefa

Hi @David406

Why not use the stylesheet?

http://doc.qt.io/qt-5/stylesheet-examples.html#customizing-a-qpushbutton-using-the-box-model

J.Hilk

@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.

Flotisable

@David406
maybe QToolButton is another choice?

David406

@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?

David406

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

J.Hilk

@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.

Flotisable

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

you can read the document of QToolButton and QToolBar

Venkatesh V

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

David406

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?

J.Hilk

@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);}");

mostefa

@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:

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

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;};

David406

@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).

mostefa

@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;};

David406

@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

David406

@mostefa
Unfortunately,

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

doesn't help.

mostefa

@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:

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 !

David406

@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?

J.Hilk

@David406

QPushButton{border: none;}

mostefa

@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 ?