Qt QGridLayout - öğe aralığını kaldırma

Question

Qt'de bir savaş gemisi uygulaması yazmaya çalışıyorum ve oyuncuların ızgaralarını temsil etmek için kullanılan QToolButtons'u içermek için iki QGridLayouts kullanıyorum. Üst düzey düzen (QMainWindows one) bir QHBoxLayout'tur. Yapmak istediğim, bu düğmeler arasındaki boşlukları kaldırmaktır. Bu şu anda bakıyor nasıl:

Kesinlikle hoş değil. Böyle bu düzenleri içine öğeleri ekliyorum:

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

Ben ara parçalar kullanmayı deneyin ama onlar da arzu değil boş noktalar bırakın.

Answer 1

Programlamada her zaman olduğu gibi, istediğinizi elde etmenin çeşitli yolları vardır, bu yüzden size başka bir çözüm olan çözümümüzü vereceğim. Oyununuz için "düğmeleri" olarak fayans kullanmak istiyorsanız, bunları güçlü bir şekilde kullanmanız gerekecek, yalnızca belirli bir platformda belirli bir tema için istediğiniz gibi görünmelerini sağlamayacaksınız, aynı zamanda şu anda ne yapıyorsunuz? . QToolButton s için varsayılan stil Mac, Windows, Linux'ta veya otomatik olarak yükselen etkinin davranışıyla aynı değildir. Bu yüzden düğme stilini tam olarak kontrol etmenizi öneriyorum. Bazı fikirler almak ve bunları uygulamanıza eklemek için kullanabileceğiniz çok basit bir örnek ekleyeceğim.

İlk olarak, QToolButton s yerine QPushButton s kullanmaya karar verdim. gibi olurdu sol taraf ızgara yerleştirmek için kod aşağıda: ızgaraya düğmeleri eklerken dizinleri değiştirdik

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

     // ... 

    } 
} 

dikkat edin. Bunun nedeni, ilk satırı ve düğmeyi küçültmek için kullanacağım aralayıcılar için ilk sütunu rezerve edeceğim.

Şimdi sıfıra düzen boşluğunu ayarlamak sağlar:

ui->gridLayoutLeft->setSpacing(0); 

ve ara ekleyin: onlar gibi

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

düğmeleri eklem olarak oldular.

Nihayet düğmeleri tarz gerekmektedir. Bunu yapmak için stil sayfalarını kullanmayı tercih ederim.

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

bu basit stil sayfası sonucudur: (The Style Sheet Syntax, Qt Style Sheets ReferenceQt Style Sheets Examples stil sayfaları hakkında bilgi Bir çok Qt belgelerinde bulunabilir):

Sen İyi bir davranış elde edinceye kadar onunla oynayabilir, otomatik yükseltme etkisini simüle edebilirsiniz, ancak en önemli gerçek, bu yaklaşımla oyun kartınızın Qt destekli tüm platformlarda tam olarak aynı görünmesidir.

Answer 2

Düğme boyutunu, simge boyutundan daha büyük yaptınız. Bu arada

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

, QToolButton QToolBar için kullanılmaktadır. Bunun yerine neden QPushButton kullanıyorsunuz?

Maalesef ilk başta yorum tarafından yukarıda wirte istiyorum, ama benim itibar çok düşük (^^;)

Sen setSpacing(0) çağırabilir ama aralık GQridLayout boyutuyla varys. Yani setSizeConstraint(QLayout::SetFixedSize) da gerekli (o zaman, belki de widget boyutunu değiştiremezsiniz). Bu yaklaşım QPushButton ile çalışır, ancak QToolButton ile çalışmaz. Görünüşe göre, QToolButton kodunun içinde bir miktar dolgu var (simgenin boyutu ayardan daha küçük görünüyor - FIELD_ICON_SIZE * FIELD_ICON_SIZE).