- The layout should be responsive.
- The height of each image must be fixed depending on the screen size. The width will be proportional to the height.
- Different images can have different sizes (you can get the image size in the results of the API).
- Images do not have to exactly match the width of the screen. There can be space at the end of the row.
It is possible that each row in the grid will have a different number of images (each row will contain as many images as it can while keeping the original ratio).
I solved it using a grid, and inside the grid, each item is an hstack. I have calculated in advance (when the downloaded images result comes back from the server, an array of arrays of images), so any item in the calculated array will be a row in our final hstack UI.
It works okay, with no lag, but I wonder, is there a more easy built-in solution? Did I over-engineer?