Setting fix spacing between Widgets

Hi, I am new to Qt and I absolutely need your help.

I have already created a custom widget derived from QRadioButton, which just looks a bit more like a button and has a fixed height:width ratio.

I put all my widget together in some GroupBoxes and it looks like this:

Attachment 12696

which is not bad, I want to have them all spaced apart equally and kind of left-aligned like so:

Attachment 12695

And I just can't find out which property handles this / how I would derive me own GroupBox/Layout/something to achieve this.

I hope you can help me,
thanks in advance: Moraxno.

Hi, did you set a layout [edit: was "model"] for the group boxes?

Could you show us some code?

Ginsengelf

edit: I meant "layout" instead of "model"

Hi Ginsengelf,

what do you mean by model?

I don't really know which source code you need, so I am making a guess here:

These are my Qt files for this Window: Attachment 12697 Attachment 12698

And here is my .cpp and .h for the custom RadioButton: Attachment 12699 Attachment 12700

I hope you these are the right information for you. If you need something else, please tell me :)


Moraxno

Edit: I changed the file extension of my header to .h, now I was allowed to upload it ^^'

Ah damn, I meant a "layout" instead of "model".

Ginsengelf

Oh, I set the layout in the Qt Designer to horizontal.

Ok, I think you simply need to add a horizontal spacer to the layout. It will take up all available space, and your widgets will be left-aligned if you add the spacer to the right of the last widget.

Ginsengelf

I already tried that, but it always takes up the same amount of space. I tried a few policies but none of the seemed to help. I am also unable to edit the "sizeHint" property, of which I think could be part of the problem...

Moraxno

I don't think you understand what Ginsengelf means by "horizontal spacer". I have added them to the three horizontal layouts in your UI file. See how this looks. Attachment 12701

Hi d_stranz,

well my understanding of a horizontal spacer in Qt is this:
Attachment 12702

And I used exactly these ones in my tests, without success. Here is a Comparison, using the file I uploaded vs. using the file you uploaded:
Attachment 12703

If you see no difference, that is not your eyes tricking you. There is no difference to see and I don't understand why.
Is there some sort of function I have to rewrite when deriving from QRadioButton?


Moraxno

There are at least three things wrong with your UI:

- there is no layout for the centralWidget, even though it contains several child widgets
- the widget containing the group boxes has no layout
- the group boxes themselves have no layouts

The lack of layouts is what is causing the spacers in your current design to not work. A spacer needs to "push" against the end of a layout and a widget (or between two widgets in a layout) in order to work. Group boxes are not layouts, so the spacers we both added don't do anything.

To fix this, you should do the following:

- add a horizontal layout at the topmost level of the central widget. Put the right-hand side widget (the frame) on the right.
- create a vertical layout, and add this as the left-hand side of the central horizontal layout
- add each of your group boxes to this vertical layout and put a vertical spacer at the bottom
- in each group box, add a horizontal layout
- in each of these horizontal layouts, add your radio buttons, then finish with a horizontal spacer at the end

The easiest way to do this is to work from the "inside-out" - make an extra-large central widget with room to create pieces of your UI. First, make one group box, add the h-layout to it, then add each of the buttons. Then, in a separate area, make the V-layout and add the first group box to it by selecting the whole group box and dragging it. Make a second group box, and add it to the V-layout below the firest, and so on. Add the vertical spacer as the last element in the V-layout. Create the topmost H-layout and drag the V-layout into it. Finally, add the frame to the right side. Resize the whole thing down to where you want it, then select the BaumerCamSoftwareClass entry from the UI tree, right-click, and select Layout Horizontally.

The Qt Group Box example shows something similar, but creates the UI using code rather than Qt Designer. In both cases, the procedure is the same - there is a hierarchy of layouts within the main widget and within the group boxes, with spacers used to push everything into alignment.

Okay, it seems like something went really wrong here. My Widgets and GroupBoxes all have layouts, I just checked it. I think somehow I copied a wrong .ui (although I don't really know, where it could be from) or I need to provide some kind of additional file for you, so it works...

But anyway, here are some screenshots I took:

Attachment 12704

Also, I just recorded my process of checking each layout and spacer and compiling the same file in VS 17. If I make any mistakes, you could probably see them there.

https://puu.sh/ywazO/2d1e6dbf81.mp4

OK, here's a VS2013 project with a dialog laid out as I think you want it. Look at the .ui file, and you will see that everything is inside layouts, as I said in the earlier post. The spacers work correctly and push everything to the left or up as expected. In your .ui code, there are no explicit layouts as children of your centralWidget or group boxes.

Attachment 12707

Attachment 12708

Not sure what's happening here - there seems to be two sets of attachments, one pair that is an earlier version (without the border on the frame) of code and screenshot, and the other a newer version (where I added the border to the frame). The only difference is the .ui file. It looks like the inline version (above) is the correct one and the one below in the Attachments box is the older version.

Oh, now I see. I thought layouts were always bound to a container, not containers themselves.
Well this changes things of course. Now the spacers work as expected.

Under these circumstances I only got one question left: How do I tell a layout to always exactly fill its parent container?

Quote:

---

How do I tell a layout to always exactly fill its parent container?

---

Layouts are strange sometimes. Even though the UI tree shows them as being children of their parent widget or layout, the Qt Designer doesn't expand them to fill the space. The only reliable way I have found to do this is to select the container widget or layout, right-click, and select Layout Horizontally (or whatever) and the layout will be resized to fill the parent widget. Sometimes this goes wrong and fortunately the Undo command works.

I thank you so much. I got it to work with your solution and another workaround I did by myself, but it finally works as I want it to.

Moraxno

Just remember, layouts are your friend. You should never size or position widgets manually inside a container - use a layout, spacers, and minimum / maximum sizes instead. By doing so, your UIs will resize in a pleasing way and will look more professional.