Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Qt Designer Scroll Area



  • I am trying to use Qt Designer/Creator to create bits of a UI, and am getting so frustrated as i just don't seem to understand the basics of how it works :(

    All I want to achieve is to create a hierarchy: QScrollArea -> QTableView or QScrollArea -> QWidget -> QGridLayout (alternatives, I might want either, not sure yet).

    1. First I try: Add New... > Qt Designer Form Class > QScrollArea (under Widgets).
      Screenshot from 2020-02-22 13-35-20.png
      Now what? It has not created the child "scrollAreaContent" QWidget. There is nothing I can do from here: I cannot drag any widget onto it, there is nothing of any use on right-click menus. WTF? [See also #5 below.]

    2. Next I abandon this, and start over. This time I pick Widget under templates/forms.
      Screenshot from 2020-02-22 14-09-56.png
      I now have a QWidget, with a no-entry sign. I right-click on it to set a layout, but all of them are disabled, only Adjust Size is available. Why? [See also #4 below.]

    3. So now I drag a Vertical Layout onto it. 2 out of 3 times it's as shown below, with the no-entry sign still there. 1 out of 3 the no entry sign disappeared, but I cannot repeat that....
      Screenshot from 2020-02-22 14-59-18.png
      What's going on?

    4. At this point, suddenly I can right-click on the parent Form QWidget and its Lay Out items are available. I have no idea why that is allowed now when it was not in #2?
      I could select Grid Layout here. But if I do I do not see a QGridLayout being added. So I abandon this bit, without understanding, and carry on?

    5. Now I drag a Scroll Area on. This time, it comes with a child scrollAreaWidgetContents widget. Great! I have no idea why this is the case here but not in #1?
      Screenshot from 2020-02-22 15-30-05.png

    6. That child of the QScrollArea is a QWidget. I want it to be a QTableView. I right-click etc. but I find no way to change it from a QWidget to something else like a QTableView. There is Promote..., but that's not what I want. I can get a Morph Into... offering me widgets, which I think is what I do want, but only ever when I am on a Q...Layout node. Which makes no sense to me, I'm not trying to "morph" a layout into a widget, I'm trying to tell it to change which widget it's using when I'm on a widget?

    7. So I give up on the QTableView approach. Instead I add a Grid Layout onto the QWidget, and at last I can start placing the bits I want.
      Screenshot from 2020-02-22 15-26-15.png
      To add insult to injury, I cannot get those child widgets to be in columns on the grid, i.e. one to the right of the other. Only in (what look like) rows on the grid, i.e. one under the other, as shown. I don't see where to set multiple columns in the QGridLayout, if that's what I need to do here?

    At this point, sadly and in frustration, I have decided to give up, at least till I get some answers here....

    I have used GUI designers in various other products and never had any trouble understanding and using them. One of Qt Designer or me is not "intuitive". Which one is it?

    I seem to be having problems both with containers and with layouts in Designer. I have no trouble in code.

    If you would care to guide me, please note I have carefully numbered each of the issues. I really need to be put out of misery on all of them. Thank you.



  • @JonB said in Qt Designer Scroll Area:

    Now what? It has not created the child "scrollAreaContent" QWidget

    I think this way is to subclass or customize your QScrollArea.

    @JonB said in Qt Designer Scroll Area:

    now have a QWidget, with a no-entry sign. I right-click on it to set a layout, but all of them are disabled, only Adjust Size is available. Why? [See also #4 below.]

    You need to put some content on your form / on your widget in order to set a layout.
    Drag a button or something else on your widget, then try again :)



  • @Pl45m4

    I think this way is to subclass or customize your QScrollArea.

    [I think this was for #1.] But I can't customize etc. it, I can't do anything on it! And anyway, how do I just design a QScrollArea of my own with some stuff on it, without sub-classing? That's what I want. I don't want QWidget > QLayout > QScrollArea, that's not how I'll use it.

    You need to put some content on your form / on your widget to set a layout.

    Drag a button or something else on your widget, then try again :)

    [I think this was for #2.] What? Why should I add any content? I don't have any. I may want to add that dynamically at runtime. If I add it now I'll have to delete it at runtime.... I want a widget with some layout on it, like:

    w = QWidget();
    w.setLayout(new QVBoxLayout);
    

    You are saying I cannot do that in Designer, until I effectively go w.layout().addWidget(subWidget) (on the designer)? I'm getting even more confused.

    Also, further confusion, what do you mean by "Drag a button or something else on your widget"? You're not allowed to have a widget direct child of other widget (most cases), you have to have a layout, widget->layout->widget. So it doesn't make sense to "drag a widget onto a (non-container) widget", you have to have an intervening layout....



  • @JonB said in Qt Designer Scroll Area:

    But I can't customize etc. it, I can't do anything on it!

    I dont know better, but IMO it's just to customize the QScrollAreaitself and not the content (e.g. scrollArea stylesheet, border, background etc). So you can use UILoader to import your customized scrollArea, you've edited with Designer before.

    @JonB said in Qt Designer Scroll Area:

    That child of the QScrollArea is a QWidget. I want it to be a QTableView

    As far as I understand, the scrollArea has a default container (widget) which holds all the content (same as QDockWidget and dockWidgetContent... everything you put on your dockWidget belongs to dockWidgetContent, which is a QWidget ifself). You dont need to replace the -content with your "content", just put it below in hierarchy. In Designer, you cant delete this default widget, so you have to deal with it ;-)

    @JonB said in Qt Designer Scroll Area:

    To add insult to injury, I cannot get those child widgets to be in columns on the grid, i.e. one to the right of the other. Only in (what look like) rows on the grid, i.e. one under the other, as shown. I don't see where to set multiple columns in the QGridLayout, if that's what I need to do here?

    You can place them next to each other by dragging them to the edge of the widget in the same row (you will see a small blue bar). If that bar has the height of your checkBox, the new checkBox will appear on the right or left of your current checkBox.
    It's indeed sometimes a bit tricky to get the right spot to release your mouseButton and probably you will drag your widget inside the wrong layout (parent) a few times, but it works :)

    @JonB said in Qt Designer Scroll Area:

    what do you mean by "Drag a button or something else on your widget"?

    Exactly this :) There's a difference between coding everything and using the Designer. As you can see, when you drag in a new widget, it has a placeholder or empty layout already. So you can put your child widget right onto it and set the correct layout afterwards

    Bildschirmfoto vom 2020-02-22 18-00-28.png

    Before I dragged the button onto the widget, I couldn't set any layout as well...

    With this configuration below, you can see, that scrollAreaWidgetContents is a kind of virtual widget. I right-clicked tableView (or TableWidget, doesnt matter) and went to the fourth from last option, which shows the parent widget... And it showed scrollArea not the widget scrollAreaWidgetContents.
    Bildschirmfoto vom 2020-02-22 18-13-10.png



  • @Pl45m4
    First, thank you so much for taking the time to type in your long reply! I am now working through it carefully, incrementing my reply as I go. In the unlikely case that you are reading this right now, please wait till I say I have finished :)

    I dont know better, but IMO it's just to customize the QScrollArea itself and not the content

    Fine, I will not try to use that route!

    You dont need to replace the -content with your "content", just put it below in hierarchy.

    All the coded examples I read for containers like, say, QScrollArea or QTabWidget which want a scrollable child widget go straight from QScrollArea/QTabWidget -> MyContentWidget. They do not go QScrollArea/QTabWidget -> QWidget > QLayout > MyContentWidget. I am concerned that at least in the QScrollArea case there are issues if I have intervening "dummy" QWidget > QLayout >. But I will now try working that way.

    In Designer, you cant delete this default widget, so you have to deal with it ;-)

    Ah ha! Well that's what I needed to know/confirm! I can edit the .ui directly to change that QWidget to the one I want instead, but I don't want to have to do something like that. I shall proceed with what Designer produces for me.

    Now I proceed as follows:

    1. I create a new Form. At this point it has a no entry sign for no layout. Screenshot from 2020-02-23 10-10-48.png

    2. I drag a QScrollArea onto it. At that point I can now go back to the Form and set it have a vertical layout, getting rid of its no-entry:
      Screenshot from 2020-02-23 10-13-03.png

    3. I add a child to that QWidget, say a push button:
      Screenshot from 2020-02-23 10-14-37.png

    4. Once the Form had a child I could set its layout. Here the QWidget parent of QPushButton is still no-entry, so needs a layout in the same way. But I can't find a way to do it!? If I right-click on that QWidget in the right-hand pane it does not offer Lay out. If I try to click in the design area it moves the selection to the parent QScrollArea, which doesn't help, I can't leave the QWidget selected and get to set its layout?? How do you manage to set the QWidget's layout??

    5. I can drag, say, a QGridLayout onto the QWidget. But that does not remove its no-entry sign. In any case, I do not now understand the difference between when/why you need to drag a QLayout object onto a widget versus when you just the widget's own layout...?
      Screenshot from 2020-02-23 10-38-15.png

    You can place them next to each other by dragging them to the edge of the widget in the same row

    Continuing with that QGridLayout for now, the really good news I can follow your instruction and place things in columns! :)

    I find the idea that (when it works!) you cannot set a widget's layout until after you put a child on it weird! I work by creating a widget, setting what layout I want it to have, then adding any children if I want them. Nice and logical. But at least you have explained I can't do it in this order.

    So, to remind you, in either of my last 2 pictures above, how do you get rid of the no-entry on that QWidget? Is what I have done --- placed an explicit QGridLayout there, and been unable to set the QWidget's own layout to Grid so the QWidget now remains with no-entry sign --- the only way to proceed? [This seems to be the same case in your first picture: how do you place a layout/get rid of the no-entry sign on specifically your centralWidget QWidget??]

    Originally I wrote:

    One of Qt Designer or me is not "intuitive". Which one is it?

    You did not comment on that one? ;-)

    I'd be so obliged if you would look at what I show/ask now and tell me how it's supposed to work. Thank you, I'm done typing now! :)


  • Lifetime Qt Champion

    @JonB said in Qt Designer Scroll Area:

    -One of Qt Designer or me is not "intuitive". Which one is it?
    With layouts, its definitely more towards Designer :)

    I do not now understand the difference between when/why you need to drag a QLayout object onto a widget versus when you just the widget's own layout...?

    The red layouts are for nested layouts so they are for inserting into a layout not used as the base one.

    You always apply the 'base' layout to a widget using right click.

    Also with scrollarea in Designer something odd is going on as if you apply a layout directly to the scrollarea
    its then shown for its content widget :
    alt text
    I assume this comes from the fact they made you cannot delete it so its "special"

    Also im not sure its something you discuss here but you can promote it
    alt text
    Meaning it is possible to use a custom without resorting to code.



  • @mrjj
    In your screenshot (first one, don't worry about promotion), your scrollAreaWidgetContents QWidget does not have a no-entry/no-layout sign.

    If you look at my pics above, say #3, I have added a QPushButton below that QWidget. But as I say, try as I might I cannot select the scrollAreaWidgetContents QWidget so that I can put a layout on it and get rid of the no-entry. How do you achieve it?? :confused:

    EDIT OMG, you set it on the parent QScrollArea scrollArea, which shouldn't have a layout, and that miraculously seems to make the child scrollAreaWidgetContents QWidget not have a no-entry sign? Seriously??


  • Lifetime Qt Champion

    @JonB
    Hi
    I just added a button to the content widget first
    Then right click on the ScrollArea (not content) and
    apply a layout.
    Then the "no sign" goes away.
    And yes I have no good answer to why that works as expected :)
    It does seem to "move" the layout to the content widget by magic.



  • @mrjj
    Yep, thanks, your reply has just crossed with my EDIT to my previous post!

    So..... if I have a QScrollArea > QWidget > QPushButton hierarchy, which shows no-entry on the QWidget because it needs a layout, I need to add that layout to the QScrollArea, which should not have a layout, and that will make the QWidget no-entry go away. RIGHT?? Lovely....


  • Lifetime Qt Champion

    @JonB
    Yep I was confused in the beginning but I come to think of it as
    you tell ScrollArea what layout you want and it handles it internally. sort of thing.


Log in to reply