Qt QGridLayout - remove spacing between items

Question

I'm trying to write a battleship implementation in Qt, and I use two QGridLayouts to host the QToolButtons that are used to represent player grids. The top-level layout (QMainWindows one) is QHBoxLayout. What I want to do is remove the spacing between these buttons. Here's what it looks like at the moment:

This is definitely not very. I add elements to these layouts as follows:

QIcon icon; icon.addFile(QStringLiteral(":/images/Resources/field_blue.png"), QSize(), QIcon::Normal, QIcon::Off); for (int i = 0; i < dimensions; ++i) { for (int j = 0; j < dimensions; ++j) { QToolButton* buttonLeft = new QToolButton(this); buttonLeft->setToolButtonStyle(Qt::ToolButtonTextUnderIcon); buttonLeft->setText(QString::number(i) + "-" + QString::number(j)); buttonLeft->setFixedSize(FIELD_ICON_SIZE + 10, FIELD_ICON_SIZE + 10); // FIELD_ICON_SIZE -> 20 buttonLeft->setIcon(icon); buttonLeft->setIconSize(QSize(FIELD_ICON_SIZE, FIELD_ICON_SIZE)); buttonLeft->setAutoRaise(true); QToolButton* buttonRight = new QToolButton(this); buttonRight->setToolButtonStyle(Qt::ToolButtonTextUnderIcon); buttonRight->setText(QString::number(i) + "-" + QString::number(j)); buttonRight->setFixedSize(FIELD_ICON_SIZE + 10, FIELD_ICON_SIZE + 10); buttonRight->setIcon(icon); buttonRight->setIconSize(QSize(FIELD_ICON_SIZE, FIELD_ICON_SIZE)); buttonRight->setAutoRaise(true); _ui.gridLayoutLeft->addWidget(buttonLeft, i, j); _ui.gridLayoutRight->addWidget(buttonRight, i, j); } } 

I could try using spacers, but they leave empty spots, which is also undesirable.

Answer 1

As always in programming, there are several ways to achieve what you want, so I will give you my solution, which is just another one. If you want to use the “buttons” as a tile for your game, you will need to firmly style them, and not just make them look the way you want for a specific theme on a specific platform, what you are doing now. The default style for QToolButton is different from Mac, Windows, Linux, and auto-raising behavior. Therefore, I recommend that you fully control the style of the button. I will include a very simple example that you can use to get some ideas and put them into your application.

At first I decided to use QPushButton instead of QToolButton s. The code to fill the left side grid will look like this:

 // ... for (int i = 0; i < dimensions; ++i) { for (int j = 0; j < dimensions; ++j) { QPushButton* buttonLeft = new QPushButton(this); buttonLeft->setFixedSize(20, 20); QToolButton* buttonRight = new QToolButton(this); ui->gridLayoutLeft->addWidget(buttonLeft, i + 1, j + 1); // ... } } 

Note that I changed the indexes when adding buttons to the grid. This is because I will reserve the first row and the first column for the pads, which I will use later to compress the buttons.

Now let's set the layout spacing to zero:

 ui->gridLayoutLeft->setSpacing(0); 

and add the delimiters:

  // Vertical spacers ui->gridLayoutLeft->addItem(new QSpacerItem(20, 40, QSizePolicy::Minimum, QSizePolicy::Expanding), 0, 0, 1, dimensions + 2); ui->gridLayoutLeft->addItem(new QSpacerItem(20, 40, QSizePolicy::Minimum, QSizePolicy::Expanding), dimensions + 1, 0, 1, dimensions + 2); // Horizontal spacers ui->gridLayoutLeft->addItem(new QSpacerItem(40, 20, QSizePolicy::Expanding, QSizePolicy::Minimum), 1, 0, dimensions, 1); ui->gridLayoutLeft->addItem(new QSpacerItem(40, 20, QSizePolicy::Expanding, QSizePolicy::Minimum), 1, dimensions + 1, dimensions, 1); 

The buttons are now as harsh as possible.

Finally, the buttons need to be styled. For this, I prefer to use style sheets. (For more information about style sheets, see the Qt documentation: Style Sheet Syntax , Link to Qt Style Sheets , Examples of Qt Style Styles )

 QString styleSheet = "QPushButton {" " background-color: blue;" " border: none;" "}" "QPushButton:hover {" "background-color: lightblue;" "}" "QPushButton:pressed {" "background-color: red;" "}"; setStyleSheet(styleSheet); 

The result of this simple style sheet:

You can play with it until you get nice behavior, you can even imitate the auto-recovery effect, but most importantly, with this approach, your game panel should look exactly on all supported Qt platforms.

Answer 2

You have made the button size larger than the icon size.

 buttonLeft->setFixedSize(FIELD_ICON_SIZE + 10, FIELD_ICON_SIZE + 10) buttonLeft->setIconSize(QSize(FIELD_ICON_SIZE, FIELD_ICON_SIZE)); 

By the way, QToolButton used for QToolBar . Why don't you use QPushButton instead?

Sorry, first I want to outline the comment above, but my reputation is too low (^^;)

You can call setSpacing(0) , but the interval will change to fit the size of the GQridLayout. So setSizeConstraint(QLayout::SetFixedSize) also necessary (then you cannot resize the widget, maybe). This approach works with QPushButton , but not with QToolButton . It seems that there are some additions inside the QToolButton code (the icon size is smaller than the setting - FIELD_ICON_SIZE * FIELD_ICON_SIZE ).