What could be causing the excessive space between dynamic buttons in a grid layout?

Question

What could be causing the excessive space between dynamic buttons in a grid layout?

I am developing an application using Qt. Within the mainwindow.cpp file, I have a frame that displays another widget. This widget is populated with QPushButtons generated dynamically from the database. The maximum limit for buttons is set at 8. Here is the code snippet responsible for creating the buttons:

 for(int i = 0; i < btnlst.count(); ++i)
    {
        QPushButton *b = new QPushButton(this);
        b->setStyleSheet("background-color: qlineargradient(spread:pad, x1:1, y1:0.682, x2:1, y2:0, stop:0.142857 rgba(220, 0, 22, 255), stop:0.980296 rgba(216, 74, 73, 255), stop:1 rgba(217, 73, 73, 255)); border:none; color:white;");
        b->setText(btnlst[i]);
        if(mood=="Frame")
        {
            QSize size(55,55);
            b->setMinimumSize(size);
            b->setMaximumSize(size);
            b->setSizePolicy(QSizePolicy(QSizePolicy::Maximum,QSizePolicy::Maximum));
            ui->gridLayout->addWidget(b,0,i,Qt::AlignVCenter);
        }
        else
        {
            QSize size(70,70);
            b->setMinimumSize(size);
            b->setMaximumSize(size);
            b->setSizePolicy(QSizePolicy(QSizePolicy::Maximum,QSizePolicy::Maximum));
            if(i<4)
                ui->gridLayout->addWidget(b,0,i,Qt::AlignVCenter);
            else
              ui->gridLayout->addWidget(b,0,i-3,Qt::AlignVCenter);
        }

        connect(b,SIGNAL(clicked()),this,SLOT(Function()));
        btn << b;

    }
    ui->gridLayout->setSpacing(0);

To maintain consistency in appearance, I have set the widget's size to a maximum of 750x150 and a minimum of 600x150. Below are images illustrating my widget layout (utilizing vertical alignment) as well as the result displayed on an embedded device:
https://i.sstatic.net/0aFJu.jpg
https://i.sstatic.net/OCvLP.jpg
While the desired black color for the widget and white color for the group box are achieved, there are unwanted gaps between each button. Additionally, only 5 out of the 8 created buttons are visible within the frame. How can I reduce the spacing between buttons?

c++css qt

Answer 1

Answer №1

To align the layout, you can easily do so by using the layout->setAlignment(...) method. Below is a functional example of center alignment. For other alignments like Qt::AlignRight or Qt::AlignLeft, you can modify accordingly.

#include <QApplication>
#include <QGroupBox>
#include <QLayout>
#include <QPushButton>

class MyWidget : public QGroupBox
{
    Q_OBJECT
public:
    MyWidget(QWidget *parent = 0) : QGroupBox(parent)
    {
        setTitle("GROUP BOX");
        setStyleSheet("QPushButton{background-color: qlineargradient(spread:pad, x1:1, y1:0.682,"
                      "x2:1, y2:0, stop:0.142857 rgba(220, 0, 22, 255),"
                      "stop:0.980296 rgba(216, 74, 73, 255),"
                      "stop:1 rgba(217, 73, 73, 255));"
                      "border:none; color:white;}");
        QGridLayout *grid_layout = new QGridLayout;
        for(int i = 0; i < 5; i++)
        {
            QPushButton *button = new QPushButton;
            button->setFixedSize(80, 80);
            button->setText("Button");
            grid_layout->addWidget(button, 0, i);
        }
        grid_layout->setAlignment(Qt::AlignCenter);
        grid_layout->setSpacing(1);
        setLayout(grid_layout);
    }
};

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    MyWidget widget;
    widget.resize(800, 200);
    widget.show();
    return a.exec();
}

#include "main.moc"

Here is the visual result after applying the above code: https://i.sstatic.net/Z3mrT.png

Answer 2

To align the layout, you can easily do so by using the layout->setAlignment(...) method. Below is a functional example of center alignment. For other alignments like Qt::AlignRight or Qt::AlignLeft, you can modify accordingly.

#include <QApplication>
#include <QGroupBox>
#include <QLayout>
#include <QPushButton>

class MyWidget : public QGroupBox
{
    Q_OBJECT
public:
    MyWidget(QWidget *parent = 0) : QGroupBox(parent)
    {
        setTitle("GROUP BOX");
        setStyleSheet("QPushButton{background-color: qlineargradient(spread:pad, x1:1, y1:0.682,"
                      "x2:1, y2:0, stop:0.142857 rgba(220, 0, 22, 255),"
                      "stop:0.980296 rgba(216, 74, 73, 255),"
                      "stop:1 rgba(217, 73, 73, 255));"
                      "border:none; color:white;}");
        QGridLayout *grid_layout = new QGridLayout;
        for(int i = 0; i < 5; i++)
        {
            QPushButton *button = new QPushButton;
            button->setFixedSize(80, 80);
            button->setText("Button");
            grid_layout->addWidget(button, 0, i);
        }
        grid_layout->setAlignment(Qt::AlignCenter);
        grid_layout->setSpacing(1);
        setLayout(grid_layout);
    }
};

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    MyWidget widget;
    widget.resize(800, 200);
    widget.show();
    return a.exec();
}

#include "main.moc"

Here is the visual result after applying the above code: https://i.sstatic.net/Z3mrT.png

What could be causing the excessive space between dynamic buttons in a grid layout?

Answer №1

Similar questions

Create a `div` element that transforms into a box when hovered over and displays text

Enhancing Images with Dynamic Captions Using JQuery

Error message encountered in Python: AttributeError stating that the 'List' object does not possess the attribute 'click'. This error occurred while using Selenium. (Image attached for reference)

Capturing both the display and audio input devices

Guidelines for retrieving a class name using jQuery when hovering over a div

I'm having trouble with my footer hiding my main content whenever I adjust the screen size. What could be causing

Is CSS unit pt recommended for styling UI elements?

Tips for Embedding External JavaScript and URLs in Joomla Protostar Template

Using `std::views::split` with Microsoft Visual Studio on Windows

What is the significance of using CRTP in this particular scenario?

Adjust the opacity of a div as you scroll using jQuery

Access a floating-point value from a MongoDB database using C++

Implementing a C Interface to utilize the power of Boost's backend functionality

The issue of CSS3 list navigation not aligning to the left side

Adding extra space around the painter: QPainter

Automatically changing the page's background color through animation upon loading

Enhancing the Appearance of Multilevel Dropdown Menus

Unable to compile avahi4j: avahi4j_Client.c is encountering an issue at line 18, indicating a fatal error due to the absence of avahi-common/error.h file in

Fluid Bootstrap layout with a fixed sidebar width

Performing a dynamic animation by toggling the class of an element with "classList.toggle" in JavaScript