PDA

View Full Version : Setting fix spacing between Widgets



Moraxno
28th November 2017, 22:23
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:

12696

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

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.

Ginsengelf
29th November 2017, 08:09
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
29th November 2017, 10:33
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: 12697 12698

And here is my .cpp and .h for the custom RadioButton: 12699 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 ^^'

Ginsengelf
29th November 2017, 10:34
Ah damn, I meant a "layout" instead of "model".

Ginsengelf

Moraxno
29th November 2017, 10:37
Oh, I set the layout in the Qt Designer to horizontal.

Ginsengelf
29th November 2017, 10:43
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
29th November 2017, 10:51
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
29th November 2017, 17:51
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. 12701

Moraxno
29th November 2017, 19:39
Hi d_stranz,

well my understanding of a horizontal spacer in Qt is this:
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:
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

d_stranz
29th November 2017, 21:02
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 (https://doc.qt.io/qt-5/qtwidgets-widgets-groupbox-example.html) 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
30th November 2017, 00:02
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:

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

d_stranz
30th November 2017, 01:54
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.

12707

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.

Moraxno
30th November 2017, 13:52
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?

d_stranz
30th November 2017, 17:36
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.

Moraxno
30th November 2017, 18:37
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

d_stranz
30th November 2017, 20:53
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.