Qt QGridLayout - 移除项目间距

Question

我正在尝试在Qt中编写战舰实现，并使用两个QGridLayout来包含用于表示玩家网格的QToolButton。顶层布局（QMainWindows）是一个QHBoxLayout。我想要实现的是删除这些按钮之间的间距。目前它看起来像这样：它绝对不好看。我通过以下方式向这些布局添加项目：

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

我可以尝试使用间隔符，但它们会留下空白区域，这也是不可取的。

- Venom

---

QGridLayout::setSpacing(0)？ - Retired Ninja

@RetiredNinja，现在看起来是这样的 - http://i.imgur.com/Of7Qjf7.png - Venom

@mhcuervo 我正在尝试消除那些蓝色图标按钮之间的空格，这些按钮应该代表玩家网格中的字段。我想让这些网格看起来像单一平面。 - Venom

Answer 1

作为编程中的常见情况，实现想要的功能有多种方法，所以我将提供我的解决方案，这只是其中之一。 如果您想将“按钮”用作游戏中的平铺，则需要对它们进行强制样式设置，不仅使其在特定主题和特定平台上看起来符合自己的需求，这就是您现在正在做的事情。默认样式的QToolButton在Mac、Windows和Linux上并不相同，也没有自动上升效果的行为。这就是为什么我建议完全控制按钮样式。 我将提供一个非常基本的示例，您可以使用它来获取一些想法并将其放入您的应用程序中。

首先，我决定使用QPushButton而不是QToolButton。以下是填充左侧网格的代码：

// ...
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);

        // ...

    }
}

请注意，我在将按钮添加到网格时更改了索引。这是因为我将保留第一行和第一列作为稍后用于缩小按钮的间隔占位符。

现在，让我们将布局间距设置为零：

ui->gridLayoutLeft->setSpacing(0);

并添加间隔器：

    // 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);

这些按钮现在联合起来了。 最后，需要对这些按钮进行样式设计。为此，我更喜欢使用样式表。(可以在Qt文档中找到关于样式表的大量信息：样式表语法，Qt样式表参考，Qt样式表示例)

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

这个简单样式表的结果如下： 你可以根据需要进行调整，甚至可以模拟自动升起的效果，但最重要的是，采用这种方法，你的游戏板在所有Qt支持的平台上看起来都应该完全一样。

- mhcuervo

---

有点好笑，我刚刚再次浏览了一下，准备发布一个答案，但是我没有你的漂亮，所以我只能投票支持你。 :) 如果你坚持使用QToolButton，则需要做的另一件事是摆脱 setToolButtonStyle(Qt :: ToolButtonTextUnderIcon)。否则，在样式表中重要的部分是“border：none;”。 - Retired Ninja

Answer 2

您将按钮的大小调整得比图标大小大了。

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

顺便提一下，QToolButton 用于 QToolBar。那为什么不使用 QPushButton 呢？

抱歉，刚开始我是想通过评论写上述内容的，但我的声望太低了(^^;)

您可以调用 setSpacing(0)，但间隔取决于 GQridLayout 的大小。因此还需要使用 setSizeConstraint(QLayout::SetFixedSize)（这样您将无法更改小部件的大小，也许）。 这种方法适用于 QPushButton，但不适用于 QToolButton。似乎在 QToolButton 代码内部有一些填充（图标大小似乎比设置的 - FIELD_ICON_SIZE * FIELD_ICON_SIZE 要小）。

- coldmund

---

我使用QToolButton是因为它有"setAutoRaise"方法。顺便说一下，当我按照你的建议进行更改时，它看起来像这样 - http://i.imgur.com/Of7Qjf7.png - Venom