Setting fix spacing between Widgets

[Moraxno]

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:

Unbenannt171.jpg

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

Unbenannt172.jpg

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.

[Ginsengelf]

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"

[Moraxno]

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: BaumerCamSoftware.h BaumerCamSoftware.ui

And here is my .cpp and .h for the custom RadioButton: RadioBox.cpp RadioBox.h

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 ^^'

[Ginsengelf]

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

Ginsengelf

[Moraxno]

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

[Ginsengelf]

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

[Moraxno]

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

[d_stranz]

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. BaumerCamSoftware.ui

[Moraxno]

Hi d_stranz,

well my understanding of a horizontal spacer in Qt is this:
spacer.png

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:
spacer compare.jpg

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

[d_stranz]

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.

[Moraxno]

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:

layouts.jpg

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