Qt QGridLayout - rimozione della spaziatura dell'articolo

Question

Sto provando a scrivere un'implementazione della nave da guerra in Qt e sto usando due QGridLayouts per contenere QToolButtons che sono usati per rappresentare le griglie dei giocatori. Il layout di primo livello (QMainWindows uno) è un QHBoxLayout. Quello che voglio realizzare è rimuovere la spaziatura tra questi pulsanti. Questo è il modo che sta cercando in questo momento:

Sicuramente non è abbastanza. Io sono l'aggiunta di elementi in questi layout come questo:

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

mi potrebbe provare a utilizzare distanziatori ma lasciare macchie vuote che non è anche auspicabile.

Answer 1

Come quasi sempre nella programmazione ci sono diversi modi per ottenere quello che vuoi, quindi ti darò la mia soluzione che è solo un'altra. Se vuoi usare i "pulsanti" come tessere per il tuo gioco, dovrai metterli in risalto, non solo farli apparire come desideri per un tema specifico in una piattaforma specifica, che è ciò che stai facendo ora . Lo stile predefinito per QToolButton s non è lo stesso su Mac, Windows, Linux, né il comportamento dell'aumento automatico. Ecco perché consiglio di assumere il pieno controllo dello stile dei pulsanti. Includerò un esempio molto semplice che è possibile utilizzare per ottenere alcune idee e inserirle nell'applicazione.

Per prima cosa ho deciso di utilizzare QPushButton s invece di QToolButton s. Il codice per la compilazione della griglia lato sinistro sarebbe come segue:

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

     // ... 

    } 
} 

Si noti che ho cambiato gli indici quando si aggiungono i pulsanti alla griglia. Questo perché riserverò la prima riga e la prima colonna per i distanziatori che userò in seguito per ridurre i pulsanti.

Ora, consente di impostare la spaziatura di layout a zero:

ui->gridLayoutLeft->setSpacing(0); 

e aggiungere i distanziatori:

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

I pulsanti sono ora come comune come possono.

Infine i pulsanti devono essere designato. Per farlo preferisco usare i fogli di stile. (Un sacco di informazioni su fogli di stile si possono trovare nella documentazione 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); 

Il risultato di questa semplice foglio di stile è:

È puoi giocarci fino a quando non ottieni un buon comportamento, puoi anche simulare l'effetto di auto-sollevamento ma il fatto più importante è che con questo approccio la tua plancia di gioco dovrebbe apparire esattamente la stessa su tutte le piattaforme supportate da Qt.

Answer 2

Hai reso le dimensioni dei pulsanti più grandi delle dimensioni dell'icona.

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

proposito, QToolButton viene utilizzato per QToolBar. Perché non usi QPushButton, invece?

Siamo spiacenti, in un primo momento voglio wirte quanto sopra dal commento, ma la mia reputazione è troppo bassa (^^;)

È possibile chiamare setSpacing(0) ma la spaziatura Varys dalla dimensione del GQridLayout. Quindi è necessario anche setSizeConstraint(QLayout::SetFixedSize) (quindi non è possibile modificare la dimensione del widget, forse). Questo approccio funziona con QPushButton, ma non con QToolButton. Sembra che ci sia del padding all'interno del codice QToolButton (la dimensione dell'icona sembra più piccola dell'impostazione - FIELD_ICON_SIZE * FIELD_ICON_SIZE).