how can i remove the gap/space for QPushButton
?
i'm looking at Windows 10 Calculator, which is:
as you can see there is no space between button 7 and 8, and i try to do the same thing in Jambi, by set the space for QGridLayout
and QPushButton
like so:
QVBoxLayout main_layout = new QVBoxLayout();
QGridLayout sample_layout = new QGridLayout();
sample_layout.setHorizontalSpacing(0);
sample_layout.setVerticalSpacing(0);
sample_layout.setContentsMargins(0,0,0,0);
sample_layout.setSpacing(0);
sample_layout.setWidgetSpacing(0);
main_layout.addLayout(sample_layout);
QLineEdit edit_input = new QLineEdit();
QPushButton action_0 = new QPushButton("0");
action_0.setMinimumHeight(60);
action_0.setContentsMargins(0, 0, 0, 0);
QPushButton action_1 = new QPushButton("1");
action_1.setMinimumHeight(60);
action_1.setContentsMargins(0, 0, 0, 0);
QPushButton action_2 = new QPushButton("2");
action_2.setMinimumHeight(60);
action_2.setContentsMargins(0, 0, 0, 0);
QPushButton action_3 = new QPushButton("3");
action_3.setMinimumHeight(60);
action_3.setContentsMargins(0, 0, 0, 0);
QPushButton action_4 = new QPushButton("4");
action_4.setMinimumHeight(60);
action_4.setContentsMargins(0, 0, 0, 0);
QPushButton action_5 = new QPushButton("5");
action_5.setMinimumHeight(60);
action_5.setContentsMargins(0, 0, 0, 0);
QPushButton action_6 = new QPushButton("6");
action_6.setMinimumHeight(60);
action_6.setContentsMargins(0, 0, 0, 0);
QPushButton action_7 = new QPushButton("7");
action_7.setMinimumHeight(60);
action_7.setContentsMargins(0, 0, 0, 0);
QPushButton action_8 = new QPushButton("8");
action_8.setMinimumHeight(60);
action_8.setContentsMargins(0, 0, 0, 0);
QPushButton action_9 = new QPushButton("9");
action_9.setMinimumHeight(60);
action_9.setContentsMargins(0, 0, 0, 0);
QPushButton action_plus = new QPushButton("+");
action_plus.setMinimumHeight(120);
action_plus.setContentsMargins(0, 0, 0, 0);
QPushButton action_minus = new QPushButton("-");
action_minus.setMinimumHeight(60);
action_minus.setContentsMargins(0, 0, 0, 0);
QPushButton action_divide = new QPushButton("/");
action_divide.setMinimumHeight(60);
action_divide.setContentsMargins(0, 0, 0, 0);
QPushButton action_times = new QPushButton("X");
action_times.setMinimumHeight(60);
action_times.setContentsMargins(0, 0, 0, 0);
QPushButton action_equal = new QPushButton("=");
action_equal.setMinimumHeight(120);
action_equal.setContentsMargins(0, 0, 0, 0);
QPushButton action_dot = new QPushButton(".");
action_dot.setMinimumHeight(60);
action_dot.setContentsMargins(0, 0, 0, 0);
QPushButton action_del = new QPushButton("< Delete");
action_del.setMinimumHeight(60);
action_del.setContentsMargins(0, 0, 0, 0);
QPushButton action_clear = new QPushButton("Clear");
action_clear.setMinimumHeight(60);
action_clear.setContentsMargins(0, 0, 0, 0);
sample_layout.addWidget(edit_input,0,0,1,4);
sample_layout.addWidget(action_minus,1,0);
sample_layout.addWidget(action_divide,1,1);
sample_layout.addWidget(action_times,1,2);
sample_layout.addWidget(action_del,1,3);
sample_layout.addWidget(action_7,2,0);
sample_layout.addWidget(action_8,2,1);
sample_layout.addWidget(action_9,2,2);
sample_layout.addWidget(action_4,3,0);
sample_layout.addWidget(action_5,3,1);
sample_layout.addWidget(action_6,3,2);
sample_layout.addWidget(action_1,4,0);
sample_layout.addWidget(action_2,4,1);
sample_layout.addWidget(action_3,4,2);
sample_layout.addWidget(action_clear,5,0);
sample_layout.addWidget(action_0,5,1);
sample_layout.addWidget(action_dot,5,2);
sample_layout.addWidget(action_plus,2,3,2,1);
sample_layout.addWidget(action_equal,4,3,2,1);
but i still getting gap in between.
Note: if i set main_layout.setContentsMargins(0,0,0,0)
and main_layout.setWidgetSpacing(0)
i get perfect fit for QLineEdit
like image below, but not QPushButton
so i believe there is an option in QPushButton
that create this gap, but there is only on option for QPushButton setContentsMargins()
, any idea?
i did look into others that asked the same question, they use QSpacerItem
which the solution doesn't make sense (Doesn't feel like correct/professional way), cause in QLineEdit
it does perfectly with out any gap, but not in QPushButton
.
Edit: when i apply action_plus.setFlat(true);
the button turn out to be look alike this:
In order to avoid a lot of writing create a custom class which inherits from
QPushButton
. Inside the constructor add a callsetFlat(true)
which is for handling the raising of the button's border (unless overridden with styles). The stylesheet below (usesetStyleSheet(...)
to set your button to use it) give a nice hover effect:Change the colour to your liking to fit the Windows 10 theme. You can omit the
setFlat(true)
and instead addto your stylesheet (along with the hover handler). The effect is the same.
The result is (on Linux in my case):
You can also flatten your
QLineEdit
using theborder
attribute in its stylesheet:No border at all:
1px solid border: