Search code examples
javaqtqt-jambijambi

QPushButton remove space (Jambi)

how can i remove the gap/space for QPushButton?

i'm looking at Windows 10 Calculator, which is:

enter image description here

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.

enter image description here

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?

enter image description here

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:

enter image description here

Solution

  • In order to avoid a lot of writing create a custom class which inherits from QPushButton. Inside the constructor add a call setFlat(true) which is for handling the raising of the button's border (unless overridden with styles). The stylesheet below (use setStyleSheet(...) to set your button to use it) give a nice hover effect:

    QPushButton:hover{
  background-color: rgb(164, 156, 156);
  border: 0px;
}

    Change the colour to your liking to fit the Windows 10 theme. You can omit the setFlat(true) and instead add 

    QPushButton{
  border: 0px
}

    to your stylesheet (along with the hover handler). The effect is the same.

    The result is (on Linux in my case):

    enter image description here

    You can also flatten your QLineEdit using the border attribute in its stylesheet:

    No border at all:

    enter image description here

    1px solid border:

    enter image description here