Results 1 to 7 of 7

Thread: Same size items with grid positions

  1. #1
    Join Date
    Sep 2017
    Posts
    18
    Qt products
    Qt5
    Platforms
    Windows

    Question Same size items with grid positions

    Hi,

    I want to create list of items(custom class) with same size(200*300px) positioning like grid with items centered, for illustration:
    Illustration.jpg

    I want items(blue rectangles) have always same size and just jump line if window is scale down.

    I tried with QGridLayout but items are on others.

    It is possible to do this with layouts?
    How can I do what I want?

  2. #2
    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: Same size items with grid positions

    The Qt Flow Layout example will do what you want. If all of your items are the same size, it will arrange them into a rectangular grid which will change its dimensions to fit the number of items and the size of the widget holding the layout.
    <=== 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.

  3. #3
    Join Date
    Sep 2017
    Posts
    18
    Qt products
    Qt5
    Platforms
    Windows

    Default Re: Same size items with grid positions

    It's working well but it is possible to center items vertically?
    Last edited by MathFurious; 2nd March 2018 at 16:49. Reason: updated contents

  4. #4
    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: Same size items with grid positions

    It's working well but it is possible to center items vertically?
    You mean, if the window width is not an even multiple of the items' widths you want equal space on the left and right sides of each row of items? You would have to modify the code in the FlowLayout doLayout() method. The critical section is this bit of code:

    Qt Code:
    1. int nextX = x + item->sizeHint().width() + spaceX;
    2. if (nextX - spaceX > effectiveRect.right() && lineHeight > 0) {
    3. x = effectiveRect.x();
    4. y = y + lineHeight + spaceY;
    5. nextX = x + item->sizeHint().width() + spaceX;
    6. lineHeight = 0;
    7. }
    8.  
    9. if (!testOnly)
    10. item->setGeometry(QRect(QPoint(x, y), item->sizeHint()));
    11.  
    12. x = nextX;
    13. lineHeight = qMax(lineHeight, item->sizeHint().height());
    To copy to clipboard, switch view to plain text mode 

    The first if() clause is checking to see if there is enough space on the current line to fit the current item. If not, the contents of the clause are executed, which sets the x coordinate of the item to the left side of the layout rectangle (which has been adjusted for margins) and the y coordinate to the top of the next line. After this clause is complete, the geometry for the item is set to whatever has been calculated (eg. further along the current line or at the start of the next line).

    The problem with this code is that each item gets laid out, one after the other, and once an item is positioned it is forgotten. What you will need to do instead is accumulate the items and their widths until the line is full, then calculate how much space remains in the width of the "effectiveRect" after subtracting the width of each item, and inter-item spacing. Divide that by two, add it to the x coordinates you've saved, then set the geometry for each item in the line. Clear the arrays of saved items, positions, and sizes and move to the next row.

    Alternatively, you can make a two-pass algorithm. Let doLayout() do its thing. After the foreach() loop, make a second pass over the items. As long as the y-coordinate of the item's position is the same, accumulate the widths of the items. That's a row. At the end of the row, do the calculation to determine how much space is left over, and go back over those items to shift their x positions again. Then clear out the stuff you've saved and do the next row, etc. Be sure you don't forget the last row by exiting the loop too soon.
    Last edited by d_stranz; 2nd March 2018 at 19:16.
    <=== 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.

  5. #5
    Join Date
    Sep 2017
    Posts
    18
    Qt products
    Qt5
    Platforms
    Windows

    Default Re: Same size items with grid positions

    Sorry, I did not express myself correctly, I want items spread, on each line the spaces between items are all the same.
    Last edited by MathFurious; 2nd March 2018 at 22:10. Reason: reformatted to look better

  6. #6
    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: Same size items with grid positions

    OK, that isn't a whole lot different. To keep the layout class as generic as possible, you still need to calculate the width of all the items in each row, then adjust the x positions so that the space between each item is the same. This padding space will be equal to the leftover width / (nItems - 1). So, item 0 has no adjustment (it sits at the left margin of the layout), item 1 sits at item0.x + item0.width + padding, item 2 at item1.x + item1.width + padding, etc.
    <=== 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.

  7. #7
    Join Date
    Sep 2017
    Posts
    18
    Qt products
    Qt5
    Platforms
    Windows

    Default Re: Same size items with grid positions

    Ok, thanks.

Similar Threads

  1. Can't get positions of graphics items in scene
    By Kamalpreet in forum Newbie
    Replies: 7
    Last Post: 30th August 2014, 20:04
  2. Replies: 0
    Last Post: 30th April 2013, 18:32
  3. Replies: 3
    Last Post: 11th December 2011, 11:09
  4. Replies: 0
    Last Post: 26th October 2010, 18:59
  5. Replies: 2
    Last Post: 5th March 2009, 11:34

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.