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

Как почти всегда в программировании существует несколько способов достижения того, чего вы хотите, поэтому я дам вам свое решение, которое является еще одним. Если вы хотите использовать «кнопки» как плитки для своей игры, вам нужно будет их прочно-стилизовать, а не только заставить их выглядеть так, как вы хотите, для определенной темы на определенной платформе, что вы делаете сейчас , Стиль по умолчанию для QToolButton s не то же самое на 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: The Style Sheet Syntax, Qt Style Sheets Reference, Qt Style Sheets Examples)

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

Результатом этого простого стиля листа:

Вы может играть с ним, пока вы не получите приятное поведение, вы даже можете имитировать эффект автовосстановления, но самым важным фактом является то, что при таком подходе ваша игровая панель должна выглядеть точно на всех поддерживаемых платформах Qt.

Answer 2

Вы сделали размер кнопок больше размера значка.

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

Кстати, QToolButton используется для QToolBar. Почему бы вам не использовать QPushButton?

К сожалению, сначала я хочу wirte выше замечанием, но моя репутация слишком низкая (^^;)

Вы можете вызвать setSpacing(0) но разнос Варис по размеру GQridLayout. Так что setSizeConstraint(QLayout::SetFixedSize) тоже необходимо (тогда вы не можете изменить размер виджета, может быть). Этот подход работает с QPushButton, но не с QToolButton. Кажется, что внутри кода QToolButton есть пробел (размер значка кажется меньше заданного - FIELD_ICON_SIZE * FIELD_ICON_SIZE).