Results 1 to 16 of 16

Thread: Setting fix spacing between Widgets

  1. #1
    Join Date
    Nov 2017
    Posts
    10
    Thanks
    2
    Qt products
    Qt5
    Platforms
    Windows

    Default 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:

    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.

  2. #2
    Join Date
    Jul 2008
    Location
    Germany
    Posts
    503
    Thanks
    11
    Thanked 76 Times in 74 Posts
    Qt products
    Qt4 Qt5
    Platforms
    Unix/X11 Windows

    Default Re: Setting fix spacing between Widgets

    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"
    Last edited by Ginsengelf; 29th November 2017 at 10:38.

  3. #3
    Join Date
    Nov 2017
    Posts
    10
    Thanks
    2
    Qt products
    Qt5
    Platforms
    Windows

    Default Re: Setting fix spacing between Widgets

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

  4. #4
    Join Date
    Jul 2008
    Location
    Germany
    Posts
    503
    Thanks
    11
    Thanked 76 Times in 74 Posts
    Qt products
    Qt4 Qt5
    Platforms
    Unix/X11 Windows

    Default Re: Setting fix spacing between Widgets

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

    Ginsengelf

  5. #5
    Join Date
    Nov 2017
    Posts
    10
    Thanks
    2
    Qt products
    Qt5
    Platforms
    Windows

    Default Re: Setting fix spacing between Widgets

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

  6. #6
    Join Date
    Jul 2008
    Location
    Germany
    Posts
    503
    Thanks
    11
    Thanked 76 Times in 74 Posts
    Qt products
    Qt4 Qt5
    Platforms
    Unix/X11 Windows

    Default Re: Setting fix spacing between Widgets

    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

  7. #7
    Join Date
    Nov 2017
    Posts
    10
    Thanks
    2
    Qt products
    Qt5
    Platforms
    Windows

    Default Re: Setting fix spacing between Widgets

    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

  8. #8
    Join Date
    Jan 2008
    Location
    Alameda, CA, USA
    Posts
    5,230
    Thanks
    302
    Thanked 864 Times in 851 Posts
    Qt products
    Qt5
    Platforms
    Windows

    Default Re: Setting fix spacing between Widgets

    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
    <=== The Great Pumpkin says ===>
    Please use CODE tags when posting source code so it is more readable. Click "Go Advanced" and then the "#" icon to insert the tags. Paste your code between them.

  9. #9
    Join Date
    Nov 2017
    Posts
    10
    Thanks
    2
    Qt products
    Qt5
    Platforms
    Windows

    Default Re: Setting fix spacing between Widgets

    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

  10. #10
    Join Date
    Jan 2008
    Location
    Alameda, CA, USA
    Posts
    5,230
    Thanks
    302
    Thanked 864 Times in 851 Posts
    Qt products
    Qt5
    Platforms
    Windows

    Default Re: Setting fix spacing between Widgets

    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.
    Last edited by d_stranz; 29th November 2017 at 21:06.
    <=== The Great Pumpkin says ===>
    Please use CODE tags when posting source code so it is more readable. Click "Go Advanced" and then the "#" icon to insert the tags. Paste your code between them.

  11. #11
    Join Date
    Nov 2017
    Posts
    10
    Thanks
    2
    Qt products
    Qt5
    Platforms
    Windows

    Default Re: Setting fix spacing between Widgets

    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

  12. #12
    Join Date
    Jan 2008
    Location
    Alameda, CA, USA
    Posts
    5,230
    Thanks
    302
    Thanked 864 Times in 851 Posts
    Qt products
    Qt5
    Platforms
    Windows

    Default Re: Setting fix spacing between Widgets

    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.

    Capture.jpg

    GroupBoxDemo.zip

    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.
    Attached Images Attached Images
    Attached Files Attached Files
    Last edited by d_stranz; 30th November 2017 at 01:59.
    <=== The Great Pumpkin says ===>
    Please use CODE tags when posting source code so it is more readable. Click "Go Advanced" and then the "#" icon to insert the tags. Paste your code between them.

  13. The following user says thank you to d_stranz for this useful post:

    Moraxno (30th November 2017)

  14. #13
    Join Date
    Nov 2017
    Posts
    10
    Thanks
    2
    Qt products
    Qt5
    Platforms
    Windows

    Default Re: Setting fix spacing between Widgets

    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?

  15. #14
    Join Date
    Jan 2008
    Location
    Alameda, CA, USA
    Posts
    5,230
    Thanks
    302
    Thanked 864 Times in 851 Posts
    Qt products
    Qt5
    Platforms
    Windows

    Default Re: Setting fix spacing between Widgets

    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.
    <=== The Great Pumpkin says ===>
    Please use CODE tags when posting source code so it is more readable. Click "Go Advanced" and then the "#" icon to insert the tags. Paste your code between them.

  16. The following user says thank you to d_stranz for this useful post:

    Moraxno (30th November 2017)

  17. #15
    Join Date
    Nov 2017
    Posts
    10
    Thanks
    2
    Qt products
    Qt5
    Platforms
    Windows

    Default Re: Setting fix spacing between Widgets

    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

  18. #16
    Join Date
    Jan 2008
    Location
    Alameda, CA, USA
    Posts
    5,230
    Thanks
    302
    Thanked 864 Times in 851 Posts
    Qt products
    Qt5
    Platforms
    Windows

    Default Re: Setting fix spacing between Widgets

    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.
    <=== The Great Pumpkin says ===>
    Please use CODE tags when posting source code so it is more readable. Click "Go Advanced" and then the "#" icon to insert the tags. Paste your code between them.

Similar Threads

  1. Setting width of widgets from QSplitter?
    By adutzu89 in forum Newbie
    Replies: 4
    Last Post: 24th May 2014, 14:07
  2. Replies: 1
    Last Post: 7th February 2014, 15:57
  3. Setting layout margin and spacing globally
    By aarpon in forum Qt Programming
    Replies: 0
    Last Post: 7th April 2009, 13:23
  4. Replies: 3
    Last Post: 28th November 2008, 00:57
  5. Spacing widgets and actions in a toolbar
    By indifference in forum Qt Programming
    Replies: 1
    Last Post: 5th September 2007, 23:59

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
Digia, Qt and their respective logos are trademarks of Digia Plc in Finland and/or other countries worldwide.