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. Space Buttons equally in Layout, but with an empty slot
Forum Updated to NodeBB v4.3 + New Features

Space Buttons equally in Layout, but with an empty slot

Scheduled Pinned Locked Moved Unsolved General and Desktop
19 Posts 5 Posters 5.7k 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.
  • S Offline
    S Offline
    Smeeth
    wrote on 1 Aug 2018, 16:09 last edited by Smeeth 8 Jan 2018, 16:26
    #1

    I'm trying to create a panel of buttons that will have 4 buttons, a space, and another button, all of equal space, like this:
    0_1533139279983_73cdd4a9-1f62-419e-9a84-3cb4013cfad5-image.png

    I have tried to use Spacers, but it seems like those require a specific height and weight, and I would like this layout to be dynamic enough to appear correctly on any resolution, so a fixed size Spacer would not work.

    I have tried to following code, but this just squishes the first 4 buttons to the top and the last one to the bottom, and doesn't space them out evenly.

        QVBoxLayout *layout = new QVBoxLayout;
        layout->setMargin(15);
        layout->setSpacing(15);
        layout->addWidget(button1, 1);
        layout->addWidget(button2, 1);
        layout->addWidget(button3, 1);
        layout->addWidget(button4, 1);
        layout->addWidget(button5, 2, Qt::AlignBottom);
        layout->addStretch();
    
        buttonPnl->setLayout(layout);
    

    I also tried using a QGridLayout and specifying the height of each row, but this looks the same as the previous example.

        QGridLayout *gridLayout = new QGridLayout;
        gridLayout->setMargin(15);
        gridLayout->setSpacing(15);
        gridLayout->addWidget(button1, 0, 0);
        gridLayout->addWidget(button2, 1, 0);
        gridLayout->addWidget(button3, 2, 0);
        gridLayout->addWidget(button4, 3, 0);
        gridLayout->addWidget(button5, 5, 0);
        gridLayout->setRowStretch(0, 1);
        gridLayout->setRowStretch(1, 1);
        gridLayout->setRowStretch(2, 1);
        gridLayout->setRowStretch(3, 1);
        gridLayout->setRowStretch(4, 1);
        gridLayout->setRowStretch(5, 1);
    

    How can I create a dynamic layout that will display my buttons correctly at any reasonable resolution?

    J 1 Reply Last reply 1 Aug 2018, 16:13
    0
    • S Smeeth
      1 Aug 2018, 16:09

      I'm trying to create a panel of buttons that will have 4 buttons, a space, and another button, all of equal space, like this:
      0_1533139279983_73cdd4a9-1f62-419e-9a84-3cb4013cfad5-image.png

      I have tried to use Spacers, but it seems like those require a specific height and weight, and I would like this layout to be dynamic enough to appear correctly on any resolution, so a fixed size Spacer would not work.

      I have tried to following code, but this just squishes the first 4 buttons to the top and the last one to the bottom, and doesn't space them out evenly.

          QVBoxLayout *layout = new QVBoxLayout;
          layout->setMargin(15);
          layout->setSpacing(15);
          layout->addWidget(button1, 1);
          layout->addWidget(button2, 1);
          layout->addWidget(button3, 1);
          layout->addWidget(button4, 1);
          layout->addWidget(button5, 2, Qt::AlignBottom);
          layout->addStretch();
      
          buttonPnl->setLayout(layout);
      

      I also tried using a QGridLayout and specifying the height of each row, but this looks the same as the previous example.

          QGridLayout *gridLayout = new QGridLayout;
          gridLayout->setMargin(15);
          gridLayout->setSpacing(15);
          gridLayout->addWidget(button1, 0, 0);
          gridLayout->addWidget(button2, 1, 0);
          gridLayout->addWidget(button3, 2, 0);
          gridLayout->addWidget(button4, 3, 0);
          gridLayout->addWidget(button5, 5, 0);
          gridLayout->setRowStretch(0, 1);
          gridLayout->setRowStretch(1, 1);
          gridLayout->setRowStretch(2, 1);
          gridLayout->setRowStretch(3, 1);
          gridLayout->setRowStretch(4, 1);
          gridLayout->setRowStretch(5, 1);
      

      How can I create a dynamic layout that will display my buttons correctly at any reasonable resolution?

      J Offline
      J Offline
      JonB
      wrote on 1 Aug 2018, 16:13 last edited by
      #2

      @Smeeth
      Someone will doubtless have a better answer than I, but aren't you going to have to measure the height of one of those buttons and use that for a vertical spacer? And BTW, I presume you assume all buttons will be single-line height.

      S 1 Reply Last reply 1 Aug 2018, 16:20
      1
      • J JonB
        1 Aug 2018, 16:13

        @Smeeth
        Someone will doubtless have a better answer than I, but aren't you going to have to measure the height of one of those buttons and use that for a vertical spacer? And BTW, I presume you assume all buttons will be single-line height.

        S Offline
        S Offline
        Smeeth
        wrote on 1 Aug 2018, 16:20 last edited by
        #3

        @JonB Yes that would do it, but how can I know the height of the button before the layout is fully constructed? A call to button1->height() gives me 480 in this code segment, which is certainly not the final height for the button.

        S 1 Reply Last reply 1 Aug 2018, 16:22
        0
        • S Smeeth
          1 Aug 2018, 16:20

          @JonB Yes that would do it, but how can I know the height of the button before the layout is fully constructed? A call to button1->height() gives me 480 in this code segment, which is certainly not the final height for the button.

          S Offline
          S Offline
          Smeeth
          wrote on 1 Aug 2018, 16:22 last edited by
          #4

          @Smeeth I figured there would be a simpler way than doing the math myself and settings the height of each button explicitly. Usually I am able to use layouts and alignments to avoid doing this, so I imagine there must be a way to space this properly with layouts.

          J 1 Reply Last reply 1 Aug 2018, 16:28
          0
          • S Smeeth
            1 Aug 2018, 16:22

            @Smeeth I figured there would be a simpler way than doing the math myself and settings the height of each button explicitly. Usually I am able to use layouts and alignments to avoid doing this, so I imagine there must be a way to space this properly with layouts.

            J Offline
            J Offline
            JonB
            wrote on 1 Aug 2018, 16:28 last edited by
            #5

            @Smeeth
            I see the problem as: how should Qt layout manager know that what you want there as "missing" is specifically another QPushbutton with its height, as opposed to any old random widget? Which makes me think: you've either got to know the height, or put a push button there and then remove/hide it without Qt adjusting to close up space, or you've got to have some kind of grid layout with rows being the fixed height of the tallest row content, or similar.

            At which point I'll shut up and leave to someone who actually knows...

            S 1 Reply Last reply 1 Aug 2018, 16:37
            0
            • J JonB
              1 Aug 2018, 16:28

              @Smeeth
              I see the problem as: how should Qt layout manager know that what you want there as "missing" is specifically another QPushbutton with its height, as opposed to any old random widget? Which makes me think: you've either got to know the height, or put a push button there and then remove/hide it without Qt adjusting to close up space, or you've got to have some kind of grid layout with rows being the fixed height of the tallest row content, or similar.

              At which point I'll shut up and leave to someone who actually knows...

              S Offline
              S Offline
              Smeeth
              wrote on 1 Aug 2018, 16:37 last edited by Smeeth 8 Jan 2018, 16:48
              #6

              @JonB I was looking for a solution like your second scenario, and that is where I thought a QGridLayout would come in handy, but it seems either it does not have that functionality, or (more likely) I am not using it correctly.

              Perhaps you are correct that I should add another button and hide it without removing.

              1 Reply Last reply
              0
              • M Offline
                M Offline
                mrjj
                Lifetime Qt Champion
                wrote on 1 Aug 2018, 18:45 last edited by
                #7

                Hi
                Why not add a QWidget as empty space ? its completely invisible.

                J 1 Reply Last reply 1 Aug 2018, 18:47
                5
                • M mrjj
                  1 Aug 2018, 18:45

                  Hi
                  Why not add a QWidget as empty space ? its completely invisible.

                  J Offline
                  J Offline
                  JonB
                  wrote on 1 Aug 2018, 18:47 last edited by
                  #8

                  @mrjj
                  How/why would that widget be equal in height to the push buttons?

                  M 1 Reply Last reply 1 Aug 2018, 18:50
                  0
                  • J JonB
                    1 Aug 2018, 18:47

                    @mrjj
                    How/why would that widget be equal in height to the push buttons?

                    M Offline
                    M Offline
                    mrjj
                    Lifetime Qt Champion
                    wrote on 1 Aug 2018, 18:50 last edited by mrjj 8 Jan 2018, 18:55
                    #9

                    @JonB
                    as it would distribute the space evenly ? Or did i miss the point ?
                    alt text

                    J J S 3 Replies Last reply 1 Aug 2018, 19:22
                    6
                    • M mrjj
                      1 Aug 2018, 18:50

                      @JonB
                      as it would distribute the space evenly ? Or did i miss the point ?
                      alt text

                      J Offline
                      J Offline
                      JonB
                      wrote on 1 Aug 2018, 19:22 last edited by
                      #10

                      @mrjj
                      I think you absolutely did not miss the point, and that looks very pretty :)

                      M 1 Reply Last reply 1 Aug 2018, 19:25
                      0
                      • J JonB
                        1 Aug 2018, 19:22

                        @mrjj
                        I think you absolutely did not miss the point, and that looks very pretty :)

                        M Offline
                        M Offline
                        mrjj
                        Lifetime Qt Champion
                        wrote on 1 Aug 2018, 19:25 last edited by
                        #11

                        @JonB
                        Ok, thats good. very hot here and brain a bit fried :)

                        1 Reply Last reply
                        0
                        • M mrjj
                          1 Aug 2018, 18:50

                          @JonB
                          as it would distribute the space evenly ? Or did i miss the point ?
                          alt text

                          J Offline
                          J Offline
                          J.Hilk
                          Moderators
                          wrote on 1 Aug 2018, 19:32 last edited by
                          #12

                          @mrjj
                          I don‘t know why the op says a Qqspacer didn‘t work.
                          This is exactly why they exist.

                          A Qwidget will do it, as you‘ve shown, but a spacer will too, with much less overhang ☺️


                          Be aware of the Qt Code of Conduct, when posting : https://forum.qt.io/topic/113070/qt-code-of-conduct


                          Q: What's that?
                          A: It's blue light.
                          Q: What does it do?
                          A: It turns blue.

                          J 1 Reply Last reply 1 Aug 2018, 19:34
                          0
                          • J J.Hilk
                            1 Aug 2018, 19:32

                            @mrjj
                            I don‘t know why the op says a Qqspacer didn‘t work.
                            This is exactly why they exist.

                            A Qwidget will do it, as you‘ve shown, but a spacer will too, with much less overhang ☺️

                            J Offline
                            J Offline
                            JonB
                            wrote on 1 Aug 2018, 19:34 last edited by JonB 8 Jan 2018, 19:35
                            #13

                            @J.Hilk
                            The OP wrote/claimed:

                            I have tried to use Spacers, but it seems like those require a specific height and weight

                            So that should not have been the case?

                            1 Reply Last reply
                            0
                            • M Offline
                              M Offline
                              mrjj
                              Lifetime Qt Champion
                              wrote on 1 Aug 2018, 19:41 last edited by
                              #14

                              Hi
                              well spacer could do the same but requires more fiddling as its greedy and compresses the
                              the ends so dont work the same "out of the box" but im sure it can be adjusted to do the same.
                              alt text

                              J 1 Reply Last reply 1 Aug 2018, 20:26
                              4
                              • M mrjj
                                1 Aug 2018, 19:41

                                Hi
                                well spacer could do the same but requires more fiddling as its greedy and compresses the
                                the ends so dont work the same "out of the box" but im sure it can be adjusted to do the same.
                                alt text

                                J Offline
                                J Offline
                                J.Hilk
                                Moderators
                                wrote on 1 Aug 2018, 20:26 last edited by J.Hilk 8 Feb 2018, 08:06
                                #15

                                @mrjj

                                mmh, not to tricky in my opinion x):

                                MainWindow::MainWindow(QWidget *parent) :
                                    QMainWindow(parent),
                                    ui(new Ui::MainWindow)
                                {
                                    ui->setupUi(this);
                                
                                    QVBoxLayout *vLayout = new QVBoxLayout(ui->centralWidget);
                                    for(int i(0); i < 5; i++){
                                        QPushButton *btn(new QPushButton(QString("Button %1").arg(i)));
                                        btn->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
                                        vLayout->addWidget(btn,1);
                                    }
                                    QSpacerItem *spacer = new QSpacerItem(0,0,QSizePolicy::Expanding,QSizePolicy::Expanding);
                                    vLayout->addItem(spacer);
                                    vLayout->setStretch(5,1);
                                    QPushButton *btn(new QPushButton(QString("Last Button")));
                                    btn->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
                                    vLayout->addWidget(btn,1);
                                }
                                

                                sry, don't know of an easy way to make a gif on the fly. X)

                                0_1533155117534_da2d388a-623f-4f0e-9ce6-134dd0b3ea1c-image.png

                                0_1533155138761_3de11ba4-6b14-42cb-93dc-26e97a5d16bc-image.png


                                Be aware of the Qt Code of Conduct, when posting : https://forum.qt.io/topic/113070/qt-code-of-conduct


                                Q: What's that?
                                A: It's blue light.
                                Q: What does it do?
                                A: It turns blue.

                                V 1 Reply Last reply 2 Aug 2018, 08:07
                                4
                                • J J.Hilk
                                  1 Aug 2018, 20:26

                                  @mrjj

                                  mmh, not to tricky in my opinion x):

                                  MainWindow::MainWindow(QWidget *parent) :
                                      QMainWindow(parent),
                                      ui(new Ui::MainWindow)
                                  {
                                      ui->setupUi(this);
                                  
                                      QVBoxLayout *vLayout = new QVBoxLayout(ui->centralWidget);
                                      for(int i(0); i < 5; i++){
                                          QPushButton *btn(new QPushButton(QString("Button %1").arg(i)));
                                          btn->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
                                          vLayout->addWidget(btn,1);
                                      }
                                      QSpacerItem *spacer = new QSpacerItem(0,0,QSizePolicy::Expanding,QSizePolicy::Expanding);
                                      vLayout->addItem(spacer);
                                      vLayout->setStretch(5,1);
                                      QPushButton *btn(new QPushButton(QString("Last Button")));
                                      btn->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
                                      vLayout->addWidget(btn,1);
                                  }
                                  

                                  sry, don't know of an easy way to make a gif on the fly. X)

                                  0_1533155117534_da2d388a-623f-4f0e-9ce6-134dd0b3ea1c-image.png

                                  0_1533155138761_3de11ba4-6b14-42cb-93dc-26e97a5d16bc-image.png

                                  V Offline
                                  V Offline
                                  VRonin
                                  wrote on 2 Aug 2018, 08:07 last edited by
                                  #16

                                  @J.Hilk said in Space Buttons equally in Layout, but with an empty slot:

                                  mmh, not to tricky in my opinion x):

                                  Just to clarify, the central point here is that the buttons and the spacer have the same vertical size policy (doesn't have to be "expanding").

                                  "La mort n'est rien, mais vivre vaincu et sans gloire, c'est mourir tous les jours"
                                  ~Napoleon Bonaparte

                                  On a crusade to banish setIndexWidget() from the holy land of Qt

                                  J 1 Reply Last reply 2 Aug 2018, 08:10
                                  1
                                  • V VRonin
                                    2 Aug 2018, 08:07

                                    @J.Hilk said in Space Buttons equally in Layout, but with an empty slot:

                                    mmh, not to tricky in my opinion x):

                                    Just to clarify, the central point here is that the buttons and the spacer have the same vertical size policy (doesn't have to be "expanding").

                                    J Offline
                                    J Offline
                                    J.Hilk
                                    Moderators
                                    wrote on 2 Aug 2018, 08:10 last edited by
                                    #17

                                    @VRonin
                                    true,
                                    but if it's not set to expanding, the sizeHint would also have to be the same for Spacer and Button, right?


                                    Be aware of the Qt Code of Conduct, when posting : https://forum.qt.io/topic/113070/qt-code-of-conduct


                                    Q: What's that?
                                    A: It's blue light.
                                    Q: What does it do?
                                    A: It turns blue.

                                    1 Reply Last reply
                                    1
                                    • M mrjj
                                      1 Aug 2018, 18:50

                                      @JonB
                                      as it would distribute the space evenly ? Or did i miss the point ?
                                      alt text

                                      S Offline
                                      S Offline
                                      Smeeth
                                      wrote on 2 Aug 2018, 14:02 last edited by
                                      #18

                                      @mrjj Is your first example using a GridLayout? Or a vertical layout? When I place the buttons and a widget in the form and combine into a QVBoxLayout or a QGridLayout, shrinking and expanding the layout only changes the height of the widget, not the buttons.

                                      M 1 Reply Last reply 2 Aug 2018, 14:22
                                      0
                                      • S Smeeth
                                        2 Aug 2018, 14:02

                                        @mrjj Is your first example using a GridLayout? Or a vertical layout? When I place the buttons and a widget in the form and combine into a QVBoxLayout or a QGridLayout, shrinking and expanding the layout only changes the height of the widget, not the buttons.

                                        M Offline
                                        M Offline
                                        mrjj
                                        Lifetime Qt Champion
                                        wrote on 2 Aug 2018, 14:22 last edited by
                                        #19

                                        @Smeeth
                                        Hi noticed the buttons come default with Fixed as policy. I changed that for that sample.

                                        1 Reply Last reply
                                        0

                                        9/19

                                        1 Aug 2018, 18:50

                                        • Login

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