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:
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?
@David406
maybe QToolButton is another choice? -
Hi,
the better way to solve this issue:
First, using AQLayoutthat 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
no,QToolButtonis a special button that is usually used inQToolBaryou 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 stylesheetdrawArrowBtn->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?
-
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 stylesheetdrawArrowBtn->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?
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);}"); -
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 stylesheetdrawArrowBtn->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?
@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 stylesheetdrawArrowBtn->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 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 stylesheetdrawArrowBtn->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;};@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 codedrawArrowBtn->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
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 codedrawArrowBtn->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 codedrawArrowBtn->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
uncheckedproperty?QPushButton:unchecked{background-color: white;}; -
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:
@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 codedrawArrowBtn->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
uncheckedproperty?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:
@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 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 !
-
@mostefa
Thanks again.
Yes, this helped. But there are separators between the buttons which I don't want, see below:
this is also the reason I used setflat(true). Any suggestion to eliminate those separators?
-
@mostefa
Thanks again.
Yes, this helped. But there are separators between the buttons which I don't want, see below:this is also the reason I used setflat(true). Any suggestion to eliminate those separators?
@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:
QPushButton{border: none;}AFAIK border: none; will not change anything
-
@J.Hilk said in Customization of push button:
QPushButton{border: none;}AFAIK border: none; will not change anything
-
@J.Hilk said in Customization of push button:
QPushButton{border: none;}AFAIK border: none; will not change anything
