Widget layout problem

[QtMaci]

Hi everyone!

Currently I'm working on a new widget subclass which should implement a control
like the navigation bars known from the MS Office applications. It should like the following screenshot:

navigation.jpg

My basic problem is to layout QPushButtons vertically, without free space between the
QPushButtons. I thought: oh, that's easy. I'll take a QVBoxLayout, add the QPushButtons into that
layout and a vertical spacer at last. I'll set the layout stretch to (0,0,0,...,1), the layout spacing to zero and it will work.
I tried that concept in Designer, and ... it worked.

But in my real implementation, I don't want add pure QPushButtons to the layout, but a special
own widget. And here's the problem: If I subclass QWidget (for example MyButton : public QWidget) and
add instances of that class to the layout,there is always some space between the widgets.
I tried that with a primitive subclass of QWidget which only added a QPushButton. The ui looks now like the screenshot:

header.jpg

I don't understand: where does this space come from?

I tried a lot of things like overriding the minimumSizeHint() function and so on. But nothing helped.
Any ideas are very welcome!

[Lykurg]

See QLayout::setContentMargins(). And have you seen QToolBox?

[QtMaci]

Lykurg, thanks for your answer.

Yes I already placed a call to setContentMargin(0, 0, 0, 0, 0) in my code. But that doesn't help.
And yes I know the QToolBox class. I just want to do the navigation widget as an exercise!

[KillGabio]

hi i had the same problem...take a look at the StyleSheets they usually solve everything http://doc.qt.io/qt-4.8/http://doc.qt.nokia.com/4.7-snapshot/stylesheet-examples.html

hope it helps i can give you the stylesheet code of my application if you want

[Lykurg]

No! Style sheets are deprecated. Don't use them.

Then post a example on how you use the layout, because without any code we can only guess... (And add a spacer/stretch as a last item!)

[KillGabio]

Wow men didnt know they were being deprecated :S I use the following layout for the menu

ui->menuBar->setStyleSheet (                 "QMenuBar"
                                                 "{"
                                                 "	background-color: qlineargradient( x1:0, y1:0, x2:0, y2:1, "
                                                 "		stop: 0   #b0c4de, "
                                                 "		stop: 0.8 #e6e6e8, "
                                                 "		stop: 1   #b0c4de ); "
                                                 "	margin:           0px; "
                                                 "	padding:          5px; "
                                                 "	spacing:          5px; "
                                                 "}"
                                                 "QMenuBar::item"
                                                 "{"
                                                 "	background-color: qlineargradient( x1:0, y1:0, x2:0, y2:1, "
                                                 "		stop: 0   #b0c4de, "
                                                 "		stop: 0.8 #c8dcf6, "
                                                 "		stop: 1   #4682b4 ); "
                                                 "	border-width:  1px; "
                                                 "	border-color:  darkkhaki; "
                                                 "	border-style:  solid; "
                                                 "	border-radius: 5px; "
                                                 "	margin:        3px; "
                                                 "	padding:       4px; "
                                                 "	spacing:       20px; "
                                                 "}"
                                                 "QMenuBar::item:selected { /* when selected using mouse or keyboard */"
                                                     "background: #a8a8a8;"
                                                 "}"
                                                 "QMenuBar::item:pressed {"
                                                     "background: #888888;"
                                                 "}"
                                                 "QMenu {"
                                                      "background-color: white;"
                                                      "margin: 5px; /* some spacing around the menu */"
                                                      "width: 180px;"
                                                  "}"
                                                  "QMenu::item {"
                                                      "padding: 10px 28px 10px 23px;"
                                                      "font: bold 12px;"
                                                      "border: 1px solid transparent; /* reserve space for selection border */}"
                                                  "QMenu::item:selected {"
                                                        "border-color: darkblue;"
                                                        "background: rgba(100, 100, 100, 150);"
                                                   "}"
                                                   "QMenu::icon:checked { /* appearance of a 'checked' icon */"
                                                        "background: gray;"
                                                        "border: 1px inset gray;"
                                                        "position: absolute;"
                                                        "top: 1px;"
                                                        "right: 1px;"
                                                        "bottom: 1px;"
                                                        "left: 1px;}"
                                                    "QMenu::separator {"
                                                        "height: 2px;"
                                                        "background: lightblue;"
                                                        "margin-left: 10px;"
                                                        "margin-right: 5px;}"
                                                     "QMenu::indicator {"
                                                        "width: 13px;"
                                                        "height: 13px;}"
 
                                                 );

ui->menuBar->setStyleSheet (                 "QMenuBar"
                                                 "{"
                                                 "	background-color: qlineargradient( x1:0, y1:0, x2:0, y2:1, "
                                                 "		stop: 0   #b0c4de, "
                                                 "		stop: 0.8 #e6e6e8, "
                                                 "		stop: 1   #b0c4de ); "
                                                 "	margin:           0px; "
                                                 "	padding:          5px; "
                                                 "	spacing:          5px; "
                                                 "}"
                                                 "QMenuBar::item"
                                                 "{"
                                                 "	background-color: qlineargradient( x1:0, y1:0, x2:0, y2:1, "
                                                 "		stop: 0   #b0c4de, "
                                                 "		stop: 0.8 #c8dcf6, "
                                                 "		stop: 1   #4682b4 ); "
                                                 "	border-width:  1px; "
                                                 "	border-color:  darkkhaki; "
                                                 "	border-style:  solid; "
                                                 "	border-radius: 5px; "
                                                 "	margin:        3px; "
                                                 "	padding:       4px; "
                                                 "	spacing:       20px; "
                                                 "}"
                                                 "QMenuBar::item:selected { /* when selected using mouse or keyboard */"
                                                     "background: #a8a8a8;"
                                                 "}"
                                                 "QMenuBar::item:pressed {"
                                                     "background: #888888;"
                                                 "}"
                                                 "QMenu {"
                                                      "background-color: white;"
                                                      "margin: 5px; /* some spacing around the menu */"
                                                      "width: 180px;"
                                                  "}"
                                                  "QMenu::item {"
                                                      "padding: 10px 28px 10px 23px;"
                                                      "font: bold 12px;"
                                                      "border: 1px solid transparent; /* reserve space for selection border */}"
                                                  "QMenu::item:selected {"
                                                        "border-color: darkblue;"
                                                        "background: rgba(100, 100, 100, 150);"
                                                   "}"
                                                   "QMenu::icon:checked { /* appearance of a 'checked' icon */"
                                                        "background: gray;"
                                                        "border: 1px inset gray;"
                                                        "position: absolute;"
                                                        "top: 1px;"
                                                        "right: 1px;"
                                                        "bottom: 1px;"
                                                        "left: 1px;}"
                                                    "QMenu::separator {"
                                                        "height: 2px;"
                                                        "background: lightblue;"
                                                        "margin-left: 10px;"
                                                        "margin-right: 5px;}"
                                                     "QMenu::indicator {"
                                                        "width: 13px;"
                                                        "height: 13px;}"

                                                 );

To copy to clipboard, switch view to plain text mode 

[QtMaci]

Ok here comes the code. The following code is created by designer. I use two QPushButtons and a vertical spacer. They are put into a vertical layout. The vertical stretch factors are 0, 0, 1. The spacing is set to 11 so the buttons are aligned.

void setupUi(QMainWindow *MainWindow)
{
if (MainWindow->objectName().isEmpty())
MainWindow->setObjectName(QString::fromUtf8("MainWindow"));
MainWindow->resize(400, 300);
centralWidget = new QWidget(MainWindow);
centralWidget->setObjectName(QString::fromUtf8("centralWidget")) ;
widget = new QWidget(centralWidget);
widget->setObjectName(QString::fromUtf8("widget"));
widget->setGeometry(QRect(0, 0, 114, 113));
verticalLayout = new QVBoxLayout(widget);
verticalLayout->setSpacing(11);
verticalLayout->setContentsMargins(11, 11, 11, 11);
verticalLayout->setObjectName(QString::fromUtf8("verticalLayout") );
verticalLayout->setContentsMargins(0, 0, 0, 0);
pushButton = new QPushButton(widget);
pushButton->setObjectName(QString::fromUtf8("pushButton"));
pushButton->setStyleSheet(QString::fromUtf8("QPushButton { background: rgb(77, 77, 77); color: rgb(255, 255, 255)}"));

verticalLayout->addWidget(pushButton);

pushButton_2 = new QPushButton(widget);
pushButton_2->setObjectName(QString::fromUtf8("pushButton_2") );
pushButton_2->setStyleSheet(QString::fromUtf8("QPushButton { background: rgb(77, 77, 77); color: rgb(255, 255, 255)}"));

verticalLayout->addWidget(pushButton_2);

verticalSpacer = new QSpacerItem(20, 40, QSizePolicy::Minimum, QSizePolicy::Expanding);

verticalLayout->addItem(verticalSpacer);

verticalLayout->setStretch(2, 1);
MainWindow->setCentralWidget(centralWidget);
menuBar = new QMenuBar(MainWindow);
menuBar->setObjectName(QString::fromUtf8("menuBar"));
menuBar->setGeometry(QRect(0, 0, 400, 22));
MainWindow->setMenuBar(menuBar);
mainToolBar = new QToolBar(MainWindow);
mainToolBar->setObjectName(QString::fromUtf8("mainToolBar")) ;
MainWindow->addToolBar(Qt::TopToolBarArea, mainToolBar);
statusBar = new QStatusBar(MainWindow);
statusBar->setObjectName(QString::fromUtf8("statusBar"));
MainWindow->setStatusBar(statusBar);

retranslateUi(MainWindow);

QMetaObject::connectSlotsByName(MainWindow);
} // setupUi

This result is:

pushButtonLayout.jpg

That's fine.

Now I replace the QPushButtons in the code by a class of mine "MyButton". The MyButton class:


class MyButton : public QWidget
{
Q_OBJECT
public:
explicit MyButton(QWidget *parent = 0);

QSize minimumSizeHint() const;
signals:

public slots:

private:
QPushButton* m_button;
};



MyButton::MyButton(QWidget *parent) :
QWidget(parent)
{
m_button = new QPushButton("PushButton", this);
}


QSize MyButton::minimumSizeHint() const {
return m_button->minimumSizeHint();
}


The result is now this:

mybutton.jpg

I guess the problem is the MyButton class. Because when I change MyButton to derive from QPushButton the blank space is not there. So, where do I go wrong in the MyButton class? Which method do I have to override?

[wysota]

Control the sizeHint and sizePolicy of your widget.

[Lykurg]

MyButton::MyButton(QWidget *parent) :
QWidget(parent)
{
m_button = new QPushButton("PushButton", this);
}

Shouldn't you also install a layout on the custom widget?

[QtMaci]

Hello again!

Now I tried several things:

1. As Lykurg mentioned I added a layout in the MyButton class:


MyButton::MyButton(QWidget *parent) :
QWidget(parent)
{
QVBoxLayout* layout = new QVBoxLayout();
m_button = new QPushButton("PushButton", this);
layout->addWidget(m_button);
layout->addStretch(1);
layout->setSpacing(0);
layout->setContentsMargins(0, 0, 0, 0);
setLayout(layout);
}

But that doesn't change the result: the gap between two MyButton widgets is there :-(

2. As wysota suggested I reimplemented the sizeHint() method as follows:

QSize MyButton::sizeHint() const {
return m_button->sizeHint();
}

and to consider the sizePolicy property I added the following line to the MyButton cstr. above:
setSizePolicy(m_button->sizePolicy());

The result is: the height of the buttons shrinked, the gap is there - see the following screenshot:

MyButton.jpg

Any more ideas?

[Lykurg]

Don't add a stretch in MyButton!

[Spitfire]

I can't see a problem here, just get the MyButton above, stick it in the layout and it works. You just have to configure container layout correctly:

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
{
    QVBoxLayout* lay = new QVBoxLayout();
    lay->setSpacing( 0 );
    lay->setMargin( 0 );
    lay->addWidget( new MyButton() );
    lay->addWidget( new MyButton() );
    lay->addWidget( new MyButton() );
    lay->addStretch( 1 ); // to push the buttons close together
 
    QWidget* w = new QWidget();
    w->setLayout( lay );
    this->setCentralWidget( w );
}

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
{
    QVBoxLayout* lay = new QVBoxLayout();
    lay->setSpacing( 0 );
    lay->setMargin( 0 );
    lay->addWidget( new MyButton() );
    lay->addWidget( new MyButton() );
    lay->addWidget( new MyButton() );
    lay->addStretch( 1 ); // to push the buttons close together

    QWidget* w = new QWidget();
    w->setLayout( lay );
    this->setCentralWidget( w );
}

To copy to clipboard, switch view to plain text mode 

button code as posted above:

MyButton::MyButton(QWidget *parent) :
    QWidget(parent)
{
    QVBoxLayout* layout = new QVBoxLayout();
    QPushButton* m_button = new QPushButton("PushButton", this);
    layout->addWidget(m_button);
    layout->addStretch(1); // not needed
    layout->setSpacing(0); // not needed if only single item is in the layout
    layout->setContentsMargins(0, 0, 0, 0);
    setLayout(layout);
}

MyButton::MyButton(QWidget *parent) :
    QWidget(parent)
{
    QVBoxLayout* layout = new QVBoxLayout();
    QPushButton* m_button = new QPushButton("PushButton", this);
    layout->addWidget(m_button);
    layout->addStretch(1); // not needed
    layout->setSpacing(0); // not needed if only single item is in the layout
    layout->setContentsMargins(0, 0, 0, 0);
    setLayout(layout);
}

To copy to clipboard, switch view to plain text mode 

[QtMaci]

I tried the solution of Spitfire and it works. That's exactly what I wanted to do. I compared it again to the layout code created by designer (see a mile above). I detected two problems: the verticalLayout is never set to a widget and the size needed is not 11 but 0. But: the sizeHint() method needs to be reimplemented in MyButton. That's the solution. All my faults...
A big thank you and a round of drinks goes to everyone answered to this thread. Thanks a lot!!!