Qt QGridLayout - usuwanie odstępów między pozycjami

Question

Próbuję napisać implementację pancernika w Qt i używam dwóch QGridLayouts do przechowywania QToolButtons, które służą do reprezentowania siatki graczy. Układ najwyższego poziomu (QMainWindows) to QHBoxLayout. Co chcę osiągnąć, to usunąć odstępy między tymi przyciskami. Jak to wygląda w tej chwili:

To na pewno nie jest ładna. Dodaję elementy do takich układów:

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

Mogę spróbować użyć przekładek, ale pozostawiają puste miejsca, co również nie jest pożądane.

Answer 1

Niemal zawsze w programowaniu jest kilka sposobów na osiągnięcie tego, co chcesz, więc dam ci moje rozwiązanie, które jest po prostu kolejnym. Jeśli chcesz używać "przycisków" jako kafelków w swojej grze, musisz je mocno podkreślić, nie tylko sprawić, by wyglądały tak, jak chcesz, dla określonego motywu na konkretnej platformie, co teraz robisz . Domyślny styl dla QToolButton s nie jest taki sam na komputerach Mac, Windows, Linux ani zachowanie efektu automatycznego wschodu. Dlatego polecam przejąć pełną kontrolę nad stylem przycisku. Podam bardzo prosty przykład, za pomocą którego można uzyskać pomysły i umieścić je w aplikacji.

Najpierw zdecydowałem się użyć QPushButton s zamiast QToolButton s. Kod do wypełniania lewą boczną siatkę będzie jak następuje:

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

     // ... 

    } 
} 

Zauważ, że zmieniłem indeksy podczas dodawania przycisków do sieci. Dzieje się tak dlatego, że zarezerwuję pierwszy wiersz i pierwszą kolumnę dla spacerów, których użyję później, aby zmniejszyć przyciski.

Teraz, pozwala ustawić odstępy układ do zera:

ui->gridLayoutLeft->setSpacing(0); 

i dodać przekładek:

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

Przyciski są teraz jako wspólne, jak mogą.

Wreszcie przyciski muszą być stylizowany. Aby to zrobić, wolę używać arkuszy stylów. (Wiele informacji na temat arkuszy stylów można znaleźć w dokumentacji 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); 

Wynikiem tego prostego arkusza stylów jest:

Ty można grać z nim, dopóki nie uzyskasz ładnego zachowania, możesz nawet zasymulować efekt automatycznego podnoszenia, ale najważniejszym faktem jest to, że przy takim podejściu plansza powinna wyglądać dokładnie tak samo na wszystkich obsługiwanych platformach Qt.

Answer 2

Rozmiar przycisków został większy niż rozmiar ikony.

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

Nawiasem mówiąc, QToolButton służy do QToolBar. Dlaczego zamiast tego nie używasz QPushButton?

Niestety, najpierw chcę wirte powyższym komentarzem, ale moja reputacja jest zbyt niska (^^;)

Można zadzwonić setSpacing(0) ale odstęp varys o wielkości GQridLayout. Tak więc setSizeConstraint(QLayout::SetFixedSize) również konieczne (wtedy nie można zmienić rozmiaru widżetu). To podejście działa z QPushButton, ale nie z QToolButton. Wygląda na to, że w środku znajduje się dopełnienie kodu QToolButton (rozmiar ikony wydaje się mniejszy niż ustawienie - FIELD_ICON_SIZE * FIELD_ICON_SIZE).