Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. General and Desktop
  4. Can't figure out how to control layouts
Forum Updated to NodeBB v4.3 + New Features

Can't figure out how to control layouts

Scheduled Pinned Locked Moved Unsolved General and Desktop
10 Posts 2 Posters 2.0k Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • L Offline
    L Offline
    LonelyZero
    wrote on last edited by LonelyZero
    #1

    Hey, folks.

    So i've tried to create my own GUI with Qt Designer and run into a problem of not really understanding how to control layouts. That's what i have right now in Designer itself.

    0_1526962718360_f020f6a7-b07f-4574-bd6f-1f0d9f40534c-image.png

    Here's anatomy of layouts. I have two vertical ones with combo box/tree widget each on the sides. Then i have grid one with push button, progress bar and spacers on the sides of each one. And all of them are thrown into horizontal layout.

    0_1526962848829_3d40bad9-5e9e-4329-9b87-0cbff230b237-image.png

    I've tried to play with size policy of progress bar but couldn't achive it getting smaller in width. When i try to shrink layout it's tree widgets that go smaller. I want progress bar to be like half of it's current width. But that's not even the biggest problem. So after finishing with GUI i created headers and cpp files to look at it. It works but a lot of elements are resized and it looks much more disjointed. Here is how it looks after compiling.

    0_1526963299231_3418eb51-3784-45eb-803f-b4db3f3c0df7-image.png

    I would appreciate even some tutorials where layout control is explained in more detail. If you can explain how i can fix it that would be great too.

    P.S. Sorry for folder name, lol.

    A 1 Reply Last reply
    0
    • L LonelyZero

      Hey, folks.

      So i've tried to create my own GUI with Qt Designer and run into a problem of not really understanding how to control layouts. That's what i have right now in Designer itself.

      0_1526962718360_f020f6a7-b07f-4574-bd6f-1f0d9f40534c-image.png

      Here's anatomy of layouts. I have two vertical ones with combo box/tree widget each on the sides. Then i have grid one with push button, progress bar and spacers on the sides of each one. And all of them are thrown into horizontal layout.

      0_1526962848829_3d40bad9-5e9e-4329-9b87-0cbff230b237-image.png

      I've tried to play with size policy of progress bar but couldn't achive it getting smaller in width. When i try to shrink layout it's tree widgets that go smaller. I want progress bar to be like half of it's current width. But that's not even the biggest problem. So after finishing with GUI i created headers and cpp files to look at it. It works but a lot of elements are resized and it looks much more disjointed. Here is how it looks after compiling.

      0_1526963299231_3418eb51-3784-45eb-803f-b4db3f3c0df7-image.png

      I would appreciate even some tutorials where layout control is explained in more detail. If you can explain how i can fix it that would be great too.

      P.S. Sorry for folder name, lol.

      A Offline
      A Offline
      ambershark
      wrote on last edited by ambershark
      #2

      @LonelyZero Lol folder name is appropriate for frustrated coding. ;)

      So when you say you want it half the width, did you mean height? Is it that big gray box under the OK button? Or do you really want it that height and actually want to squish it width wise?

      Either way really what you need is QSpacerItem in your layout to squish it up or on the sides.

      Once I understand more I can help you with your layout. They are frustrating to learn when you first start Qt after a while though you'll wonder why you ever thought it was hard to deal with.

      Oh and the disjointed look is because of the margins. You can control those on each layout with things like setMargins(0) for all sides, or individually based on needs.

      Edit again: looking at it some more it looks like the drop down boxes are sizing bigger which is also contributing to the disjointed look. My guess here is you are trying to do a "traditional" gui and control sizing too much rather than letting Qt and layouts do the sizing for you. It's pretty normal for people new to Qt. I fought layouts a lot when I first learned because I was coming from a windows GUI (MFC) where you didn't have layouts.

      My L-GPL'd C++ Logger github.com/ambershark-mike/sharklog

      L 1 Reply Last reply
      2
      • A ambershark

        @LonelyZero Lol folder name is appropriate for frustrated coding. ;)

        So when you say you want it half the width, did you mean height? Is it that big gray box under the OK button? Or do you really want it that height and actually want to squish it width wise?

        Either way really what you need is QSpacerItem in your layout to squish it up or on the sides.

        Once I understand more I can help you with your layout. They are frustrating to learn when you first start Qt after a while though you'll wonder why you ever thought it was hard to deal with.

        Oh and the disjointed look is because of the margins. You can control those on each layout with things like setMargins(0) for all sides, or individually based on needs.

        Edit again: looking at it some more it looks like the drop down boxes are sizing bigger which is also contributing to the disjointed look. My guess here is you are trying to do a "traditional" gui and control sizing too much rather than letting Qt and layouts do the sizing for you. It's pretty normal for people new to Qt. I fought layouts a lot when I first learned because I was coming from a windows GUI (MFC) where you didn't have layouts.

        L Offline
        L Offline
        LonelyZero
        wrote on last edited by
        #3

        @ambershark

        Firstly, thanks for replying!

        So true, heh.

        Yeah, big gray box. And i actually mean width. Like that. Red parts i want to get rid off. And both vertical layouts to come closer.

        0_1526967397072_3788fe39-ba1e-4842-abb3-a2f0ee358d91-image.png

        I actually have spacers. They just have 0 width. Here i changed it to 40. The thing is as you can see they decrease the size of trees and combos and not button/progress bar.

        0_1526967583066_2e31839e-ae15-4cc6-b21f-cf99fc0b4196-image.png

        I want to be clear about what i mean when i say disjointed. Those four parts. I'll try changing margins right now.

        0_1526967730384_bd6ffd81-ed1f-4310-affb-76309344f121-image.png

        I've tried to let Designer do all the work but it just didn't look good to me. I mean if not for the spacers that's how button/bar would look like. I wanna have some understanding of what i'm doing here lol.

        0_1526968038199_e0ff245e-69c3-4489-9254-a141aeff02e6-image.png

        A 1 Reply Last reply
        1
        • L LonelyZero

          @ambershark

          Firstly, thanks for replying!

          So true, heh.

          Yeah, big gray box. And i actually mean width. Like that. Red parts i want to get rid off. And both vertical layouts to come closer.

          0_1526967397072_3788fe39-ba1e-4842-abb3-a2f0ee358d91-image.png

          I actually have spacers. They just have 0 width. Here i changed it to 40. The thing is as you can see they decrease the size of trees and combos and not button/progress bar.

          0_1526967583066_2e31839e-ae15-4cc6-b21f-cf99fc0b4196-image.png

          I want to be clear about what i mean when i say disjointed. Those four parts. I'll try changing margins right now.

          0_1526967730384_bd6ffd81-ed1f-4310-affb-76309344f121-image.png

          I've tried to let Designer do all the work but it just didn't look good to me. I mean if not for the spacers that's how button/bar would look like. I wanna have some understanding of what i'm doing here lol.

          0_1526968038199_e0ff245e-69c3-4489-9254-a141aeff02e6-image.png

          A Offline
          A Offline
          ambershark
          wrote on last edited by
          #4

          @LonelyZero Ok I see, give me a min and I'll write up the code to do what I think you want.

          My L-GPL'd C++ Logger github.com/ambershark-mike/sharklog

          1 Reply Last reply
          1
          • L Offline
            L Offline
            LonelyZero
            wrote on last edited by LonelyZero
            #5

            Yeah, i didn't explain correctly what i meant by disjointed. Understood it when changed margins. It changes space between widgets inside layout. I think explanation in my second post should be enough.

            A 2 Replies Last reply
            0
            • L LonelyZero

              Yeah, i didn't explain correctly what i meant by disjointed. Understood it when changed margins. It changes space between widgets inside layout. I think explanation in my second post should be enough.

              A Offline
              A Offline
              ambershark
              wrote on last edited by
              #6

              @LonelyZero Ok here we go... I'm not a fan of designer so I tend to design my GUIs in code which is what I did here. You could translate all this to a UI form in designer easily though.

              Here is the screenshot:

              0_1526969114237_Screenshot from 2018-05-21 23-04-20.png

              And here is the code that does it:

              MyWindow::MyWindow() : QWidget(nullptr)
              {
                  resize (800, 600);
                  
                  // left side tree and combo
                  auto vb1 = new QVBoxLayout();
                  vb1->addWidget(new QComboBox);
                  vb1->addWidget(new QTreeWidget);
                  
                  // middle button and progress bar
                  auto vb2 = new QVBoxLayout();
                  auto button = new QPushButton("OK");
                  button->setMinimumHeight(60);
                  vb2->addWidget(button);
                  auto pb = new QProgressBar();
                  pb->setOrientation(Qt::Vertical);
                  pb->setValue(50);
                  pb->setMaximumWidth(80);
                  vb2->addWidget(pb);
                  
                  // horizontal box to control middle section sizing
                  auto hbx = new QHBoxLayout();
                  hbx->setSizeConstraint(QLayout::SetFixedSize);
                  hbx->addLayout(vb2);
                  
                  // right side tree and combo
                  auto vb3 = new QVBoxLayout();
                  vb3->addWidget(new QComboBox);
                  vb3->addWidget(new QTreeWidget);
                  
                  // horizontal group holding button bar and left/right trees
                  auto hb1 = new QHBoxLayout();
                  hb1->addLayout(vb1);
                  hb1->addLayout(hbx);
                  hb1->addLayout(vb3);
                  
                  // setup bottom group box and label
                  auto vbx = new QVBoxLayout();
                  vbx->addLayout(hb1);
                  auto gb = new QGroupBox();
                  gb->setTitle("Testing");
                  auto vblabel = new QVBoxLayout();
                  vblabel->addWidget(new QLabel("something"));
                  gb->setLayout(vblabel);
                  vbx->addWidget(gb);
                  
                  setLayout(vbx);
              }
              

              My L-GPL'd C++ Logger github.com/ambershark-mike/sharklog

              1 Reply Last reply
              4
              • L LonelyZero

                Yeah, i didn't explain correctly what i meant by disjointed. Understood it when changed margins. It changes space between widgets inside layout. I think explanation in my second post should be enough.

                A Offline
                A Offline
                ambershark
                wrote on last edited by
                #7

                @LonelyZero Oh and that middle part will stay that size as you resize the window, so the trees on the left and right will grow but the middle stays static sized.

                My L-GPL'd C++ Logger github.com/ambershark-mike/sharklog

                L 2 Replies Last reply
                3
                • A ambershark

                  @LonelyZero Oh and that middle part will stay that size as you resize the window, so the trees on the left and right will grow but the middle stays static sized.

                  L Offline
                  L Offline
                  LonelyZero
                  wrote on last edited by
                  #8

                  @ambershark

                  Thanks a lot! I'll look it over in couple hours.

                  1 Reply Last reply
                  0
                  • A ambershark

                    @LonelyZero Oh and that middle part will stay that size as you resize the window, so the trees on the left and right will grow but the middle stays static sized.

                    L Offline
                    L Offline
                    LonelyZero
                    wrote on last edited by LonelyZero
                    #9

                    @ambershark

                    So i've gone through your code and tried to change everything in a similar way for Designer. Thanks to minimum and maximum sizes i actually got rid off all the stretches. The thing that didn't change was progress bar weird position. So i actually used horizontal spacers and grid layout instead of vertical one to place progress and button to where i want them. Only thing that's weird now is when i try to make push/progress high enough to be similar to widget/combo parts it moves down. I'll probably leave it that way for now because it's not a big deal and i really should move on. Thanks for the help.

                    Interesting though i probably did every change that was needed to copy your code and it still didn't work as well as yours. I'll go into it in my free time. It's a) me messing something up b) code working in some way differently than Designer c) order of commands playing some role because of course i didn't copy order of your commands.

                    0_1526993080547_642c4960-d8be-42ac-b77a-74dc819caaff-image.png

                    A 1 Reply Last reply
                    1
                    • L LonelyZero

                      @ambershark

                      So i've gone through your code and tried to change everything in a similar way for Designer. Thanks to minimum and maximum sizes i actually got rid off all the stretches. The thing that didn't change was progress bar weird position. So i actually used horizontal spacers and grid layout instead of vertical one to place progress and button to where i want them. Only thing that's weird now is when i try to make push/progress high enough to be similar to widget/combo parts it moves down. I'll probably leave it that way for now because it's not a big deal and i really should move on. Thanks for the help.

                      Interesting though i probably did every change that was needed to copy your code and it still didn't work as well as yours. I'll go into it in my free time. It's a) me messing something up b) code working in some way differently than Designer c) order of commands playing some role because of course i didn't copy order of your commands.

                      0_1526993080547_642c4960-d8be-42ac-b77a-74dc819caaff-image.png

                      A Offline
                      A Offline
                      ambershark
                      wrote on last edited by
                      #10

                      @LonelyZero Nice. As long as it's working well enough for you then I wouldn't worry about it too much.

                      The sizing thing we could fix fairly easily if it bugs you.

                      As for trying to do what I did with code in the designer ... now you know why I just prefer to do it in code. Designer is always a fight for me. If you really want to see it in designer I can do it and share the .ui here for you to load up and check out.

                      Also, I find sometimes (a lot even) the preview in designer does not match the compiled and run code. Which makes it really hard to get sizing and such right. Of course then you have to deal with different looks on different platforms too. So it's always better to run it outside of designer just to check.

                      My L-GPL'd C++ Logger github.com/ambershark-mike/sharklog

                      1 Reply Last reply
                      0

                      • Login

                      • Login or register to search.
                      • First post
                        Last post
                      0
                      • Categories
                      • Recent
                      • Tags
                      • Popular
                      • Users
                      • Groups
                      • Search
                      • Get Qt Extensions
                      • Unsolved