Qt remove empty space between widgets on QVBoxLayout

15,411

Solution 1

I know the question was posted a year ago, but if it can help some people save some time, I would be glad. I had the same problem and was able to solve it by setting:

  • QFrame.setFrameShape() to NoFrame
  • QFrame.setLineWidth() to 0.

The image below is the result of 2 QtextEdit put side by side in a Layout, using the described method.

enter image description here

http://doc.qt.io/qt-5/qframe.html#lineWidth-prop

Solution 2

Try this to achieve a "tight" look. Note that if you resize the parent widget, they will not move. Not sure if this is what you want or not, but...

// After all widgets are added to the layout
layout->insertStretch( -1, 1 );

The 2nd argument needs to be higher than any other stretch factor. Stretch factor is default zero, so if you don't set it, the above one-liner should work.

Solution 3

Spacing Never Zero?

As the Qt document says, some default GUI widget has extra frame around it.

Take QPushButton as an example:

In some GUI styles a default button is drawn with an extra frame around it, up to 3 pixels or more. Qt automatically keeps this space free around auto-default buttons, i.e. auto-default buttons may have a slightly larger size hint.

So the culprit is not the layout but the widget itself instead. "Invisible" margin of a default widget remains even if the spacing of the layout has been set to 0.

Soultion

If you really need a "compact" layout, my suggestion is to resort to the stylesheet of the widget.


Examples

Here are examples to illustrate the idea:

Here, we have a vertical layout with both margin and spacing equal to 0, and the buttons with custom stylesheet:

 QPushButton {
     border: 2px solid #8f8f91;
     border-radius: 6px;
     background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                       stop: 0 #f6f7fa, stop: 1 #dadbde);
     min-width: 80px;
 }

// (further stylesheet for button click is needed)

Resetting stylesheet allows us to make the layout more compact:

enter image description here

Insert a default QPushButton to see the difference:

enter image description here

You can see there is space around the default QPushButton. That's the same for other kinds of widgets.

Solution 4

I could be wrong but there does not seem to be an obvious and non-hack of a way to do what you desire. However, according to the documentation you may find that just doing a manual layout will solve your problem. (http://doc.qt.io/qt-5/layout.html : Manual Layout)

It seems as if one could implement a Layout class that actually provides a very compact horizontal or vertical layout and I believe I had written one a few years ago using Python and Qt. With that in mind, you should be able to implement your own MyCompactLayout(horizontal=True) and use it.

Share:
15,411
Tatarinho
Author by

Tatarinho

Updated on June 07, 2022

Comments

  • Tatarinho
    Tatarinho about 2 years

    I have annoying problem. I created QVBoxLayout on which I added my widgets. This is sample from my constructor:

    layout = new QVBoxLayout;
    layout->setMargin(0);
    layout->setContentsMargins(QMargins(0,0,0,0));
    layout->setSpacing(0);
    

    And then I have function to add widgets.

    layout->addWidget(_wave);
    

    _wave is my own widget. But you can add whatever you want, for example QButton.

    What do I want achieve? Similar like this but without any spaces beetween widgets added to layout. Just only QButtons or other widget, sticked each other.

    I added everywhere setMargins, setSpacing etc. Please help me with that, I don't really have an idea what should I do.

    enter image description here

    Sorry for colors, but I wanted to mentioned what I want to achieve. I have mainWindow on which I added QWidget. This widget have blue background. Then to the layout, Im addding some widgets, which are orange on this image. I just want to be sure, that this blue background between widget isnt visible. I want to have widget under widget, without any space.