Qt QGridLayout - 删除项目间距

Question

我正在尝试在Qt中编写战舰的实现,我正在使用两个QGridLayouts来包含用于表示玩家网格的QToolButtons.顶级布局(QMainWindows one)是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);
    }
}

我可以尝试使用垫片,但它们会留下空白点,这也是不可取的.

Answer 1

几乎总是在编程中有几种方法可以达到你想要的效果,所以我会给你解决方案,这只是另一种方法.如果你想使用"按钮"作为游戏的图块,你需要对它们进行强化,不仅要让它们看起来像你想要的特定平台中的特定主题,这就是你现在正在做的事情.QToolButtons 的默认样式在Mac,Windows,Linux上不同,也不是自动上升效果的行为.这就是我建议完全控制按钮样式的原因.我将包含一个非常基本的示例,您可以使用它来获取一些想法并将它们放入您的应用程序中.

首先,我决定使用QPushButtons而不是QToolButtons.填充左侧网格的代码如下:

// ...
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支持的平台上看起来完全相同.