Как сгруппировать набор изображений определенным образом, используя текущий размер представления в Swiftui ⇐ IOS

[Anonymous]

Я хочу достичь конкретного дизайна с 7 картинками. 7 изображений состоят из 5 квадратов (оригинал 800x800px) и 2 прямоугольника (оригинал 400x200px). Конечная цель должна выглядеть как этот пример:

Это должно быть 3 ряда изображений, строка 1 состоит из 3 квадратов, где на трети ряда, в ряду 2 есть прямоугольник и квадрат, а последняя строка просто имеет один прямоугольник Полем Проблема, с которой я сталкиваюсь, заключается в том, что когда я добавляю представление к родителям, я получаю этот результат:

Чтобы достичь этого макета, я попытался использовать комбинацию Vstacks и Hstack и попытался вычислять ширину изображений, используя около 1/3 Просмотр с помощью GeometryReader. < /p>

Код: Выделить всё

import SwiftUI

struct OverviewTiles: View {
var body: some View {
// TODO: There will be different designs so be sure to look out for that
GeometryReader { geo in
let size = geo.size.width * 0.66
VStack(spacing: 16) {
HStack(spacing: 16) {
Image("tiles_square")
.resizable()
.scaledToFit()
.frame(width: size)
VStack(spacing: 16) {
Image("tiles_square")
.resizable()
.scaledToFit()
Image("tiles_square")
.resizable()
.scaledToFit()
}
}
HStack(spacing: 16) {
Image("tiles_landscape")
.resizable()
.scaledToFit()
.frame(width: size)
Image("tiles_square")
.resizable()
.scaledToFit()
}
Image("tiles_landscape")
.resizable()
.scaledToFit()
}
.frame(maxWidth: .infinity, maxHeight: .infinity)
}

}
}

Экземпляр представления создается внутри ScrollView. Я относительно новичок в SwiftUI, и мне хотелось бы знать, правильный ли это подход. В конечном итоге мне нравится, чтобы этот элемент правильно реагировал на изменения ориентации, хотя, возможно, тогда следует изменить порядок изображений. Итак, правильно ли использовать GeometryReader или есть более эффективные способы добиться этого?
Большое спасибо за помощь.

Подробнее здесь: https://stackoverflow.com/questions/793 ... ew-size-in