0

I am adding Image objects dynamically to a GridLayout in a QML file in qt. I want to position the image items so that each new image item comes to the right side of the previous one and if there is no place in that row, it is placed directly to the next row. It is exactly the way how I typed this question, i.e. letters are my image items and text box is the layout.

However the output is following:

Screenshot of my layout

The layout leaves space between items as seen in the screenshot. I've read through the properties of gridlayout and tried many combinations out but didn't come up with the right combination. These are the properties I set so far:

GridLayout {
    id: myLayout
    anchors.fill: parent

    columnSpacing: preferredColumnSpacing
    rowSpacing: preferredRowSpacing

    Component {
        id: myImageComponent
        Image {
            visible: true
            Layout.alignment: (Qt.AlignLeft | Qt.AlignTop)
            Layout.preferredWidth: preferredImageWidth
            Layout.preferredHeight: preferredImageHeight
        }
    }
}

Which modification gives me the expected behaviour?

Edit: in the screenshot above, the layout has 9 columns, 4 rows but 17 image items.

Mitch
  • 23,716
  • 9
  • 83
  • 122
OnurA
  • 611
  • 2
  • 11
  • 25
  • 1
    You just `anchors.fill` the `GridLayout`: spacing is not strict with layouts - see [this similar answer](http://stackoverflow.com/a/35592509/2538363). Consider the usage of a `Grid` or a different anchoring or the usage of a filler (as in the linked answer). – BaCaRoZzo Mar 08 '16 at 14:23
  • Thanks Grid was the solution! – OnurA Mar 08 '16 at 14:40
  • @BaCaRoZzo Grid positioner does not divide screen into equal sized columns/rows. For example, if I have screenWidth = 600 and itemWidth = 100 and 3 columns, it positions items on the left side and leaves 300 wide empty area on the right. How can I divide the screen into 3 equal sized columns in a Grid? – OnurA Mar 14 '16 at 09:37
  • That's why you should use `Grid`: because you want a specific distance between `Item`s disregarding the left space. A layout instead would fill the available space (granted it is `anchors.fill`ing the paret). What do you want? Fill the space, specific distance between `Item`s, both of them? Re-reading the first paragraph it seems to me that also a `Flow` is sufficient. By reading your comment it seems like you want to fill the `width`. Fair enough, you can use a "proxy" item which is exactly 1/3 of the width. – BaCaRoZzo Mar 14 '16 at 09:48
  • What I want is actually divide the screen into a certain amount of EQUAL SIZED rows/columns. The other constraint is that the items are placed starting from the 0th column and 0th row into the 1st column, 2nd column... – OnurA Mar 14 '16 at 10:07
  • So it is all about 2 things: 1) The screen should be divided into equal sized columns/rows (i.e. matrix) 2) The flow is left to right – OnurA Mar 14 '16 at 10:09
  • 1
    Like [this](http://pastebin.com/embed_js/2Ec5Rj56)? – BaCaRoZzo Mar 14 '16 at 10:26
  • 1
    There are several constraint involved here. My example is simple. Talking from a dev pov generalizing it wouldn't be that simple, especially the corner cases. I'm not defending anyone here, just guessing. I've made the same question to myself when I had to create a regular `GridView`. Anyhow, if you add the proxy as the root to your dynamically created objects it should work. – BaCaRoZzo Mar 14 '16 at 11:30
  • Maybe GridLayout was the right one from the beginning. The only modification could be the filler item as you suggested in the other post with Layout.fillHeight – OnurA Mar 14 '16 at 11:31
  • If I use your suggestion with proxyItems, can I add proxy items one by one to the layout or do I have to create all of the items at once? – OnurA Mar 14 '16 at 11:51
  • Can't you just modify the dynamic `Item`s to have the proxy as their root `Item`? – BaCaRoZzo Mar 14 '16 at 11:54
  • Yes I did it that way. However I changed it again back to normal grid layout without the proxy item. It gave me the least disturbing output compared to other methods. – OnurA Mar 14 '16 at 12:18
  • Actually after some thinking, what I want is col. x row container/proxy items with child items in them. The critical point is that some of them should have no children if the number of child items is less than the number of container items. – OnurA Mar 14 '16 at 12:25
  • However, since I am working with dynamic objects, it is very hard and time-costly to implement. That's why I will have to live with the GridLayout since the grid is not horizontally centered, which is the most disturbing effect for me. – OnurA Mar 14 '16 at 12:27
  • @BaCaRoZzo thanks for your effort! – OnurA Mar 14 '16 at 12:42
  • 1
    No problem, we are here to help each other. :) Further investigation could lead to a solution. For instance, do you have a strict number of rows/columns or should they arrange in number according to the amount of instanced items? Depending on the result you can also consider a dynamic `GridView` with an object model. I HATE such a solution but it could give interesting results. Anyhow, if you change your mind feel free to write back. Happy coding! – BaCaRoZzo Mar 14 '16 at 13:15
  • Yes, the "container grid item" should rearrange its rows/columns according to the number of child items. That's why I used dynamic object creation. I wasn't aware of `GridView` until you mentioned it. Now I am using it for something else. If I master it after that I can adapt it for the solution of this question :) – OnurA Mar 14 '16 at 14:21
  • Well, centering there can be made easy by using the proxy `Item` and dynamically defining the `cellWidth`/`cellHeight` properties for such proxies, according to your specific constraints. Once you have a solution please shared it: i'm interested in seeing your use case at work. – BaCaRoZzo Mar 14 '16 at 14:46

0 Answers0