Problems with Open-Source Downloads read https://www.qt.io/blog/problem-with-open-source-downloads and https://forum.qt.io/post/638946

GridLayout messed up



  • Please help me, I have spent quite some time on this and I don't get it at all.
    I am trying to build a gui with 4 buttons and a table view and I want it to look like that https://dl.dropboxusercontent.com/u/52808484/viewwant.png but instead the buttons are messed up like that https://dl.dropboxusercontent.com/u/52808484/viewcurrent.png.

    I am using QGridLayout because I wanted the widgets to resize when I am resizing the window which now works but the view is not how I want it.

    Any ideas?


  • Moderators

    You need to span tableview across several grid cells, like so:
    @
    QGridLayout* layout = new QGridLayout();
    layout->addWidget(new QPushButton("Overview") ,0,0);
    layout->addWidget(new QPushButton("Idle Stats"),1,0);
    layout->addWidget(new QPushButton("Frequency Stats"),2,0);
    layout->addWidget(new QPushButton("Tunables"),3,0);
    layout->addItem(new QSpacerItem(0,0),4,0);
    layout->addWidget(new QTableView(),0,1,5,1);

    whateverParentWidget->setLayout(layout);
    @



  • [quote author="Chris Kawa" date="1390870977"]You need to span tableview across several grid cells, like so:
    @
    QGridLayout* layout = new QGridLayout();
    layout->addWidget(new QPushButton("Overview") ,0,0);
    layout->addWidget(new QPushButton("Idle Stats"),1,0);
    layout->addWidget(new QPushButton("Frequency Stats"),2,0);
    layout->addWidget(new QPushButton("Tunables"),3,0);
    layout->addItem(new QSpacerItem(0,0),4,0);
    layout->addWidget(new QTableView(),0,1,5,1);

    whateverParentWidget->setLayout(layout);
    @[/quote]

    It seems that this works but I don't understand why. Instead of writing "new QPushButton" and "new QTableView" I was giving the names of the buttons and tableView objects I created from the designer and for the table view I was using the second version of addWidget, @void QGridLayout::addWidget ( QWidget * widget, int fromRow, int fromColumn, int rowSpan, int columnSpan, Qt::Alignment alignment = 0 )@ how did you know the values of fromRow, fromColumn, rowSpan and columnSpan??


  • Moderators

    The key here is the spacer item and rowSpan parameter of the item containing tableview.
    Imagine a grid of cells like this (row-column):
    @
    [0-0] [0-1]
    [1-0] [1-1]
    [2-0] [2-1]
    [3-0] [3-1]
    [4-0] [4-1]
    @
    Each button gets a single cell: 0-0, 1-0, 2-0 and 3-0.
    Under the buttons there's a spacer at 4-0 used to fill the remaining vertical space.
    The whole second column (5 cells) is occupied by tableview. I set it to start at 0-1 and occupy 5 cells vertically and one horizontally (rowSpan=5, colSpan=1).

    What didn't work on your image is that you had the tableview in correct spot but occupying a single cell, while it should span vertically.


  • Moderators

    If you want to create this in the designer instead of writing that code then just insert items like you had them previously, add a spacer (the blue vertical spring thingie) under buttons and then click and drag the bottom border of the tableview to span it down.



  • That is a great explanation. Do you mind if I post it on my blog so that other people can see it?


  • Moderators

    Sure, go ahead.


Log in to reply