I wish to obtain a selected design with 7 photos. The 7 photos include 5 squares (800x800px unique) and a couple of rectangle (400x200px unique). The top aim ought to seem like this instance:
It needs to be 3 rows of images, row 1 consists of three squares, the place on is a few third of the row, row 2 has a rectangle and a sq. and the final row simply has a single rectangle. The Drawback I am dealing with is that once I add the view to the guardian, I get that final result:
To attain this structure I attempted to make use of a mixture of VStacks and HStack and tried to calculate the width of the photographs utilizing about 1/3 of the view with a GeometryReader.
import SwiftUI
struct OverviewTiles: View {
var physique: some View {
// TODO: There will likely be completely different designs so you should definitely look out for that
GeometryReader { geo in
let dimension = geo.dimension.width * 0.66
VStack(spacing: 16) {
HStack(spacing: 16) {
Picture("tiles_square")
.resizable()
.scaledToFit()
.body(width: dimension)
VStack(spacing: 16) {
Picture("tiles_square")
.resizable()
.scaledToFit()
Picture("tiles_square")
.resizable()
.scaledToFit()
}
}
HStack(spacing: 16) {
Picture("tiles_landscape")
.resizable()
.scaledToFit()
.body(width: dimension)
Picture("tiles_square")
.resizable()
.scaledToFit()
}
Picture("tiles_landscape")
.resizable()
.scaledToFit()
}
.body(maxWidth: .infinity, maxHeight: .infinity)
}
}
}
The View itself is instantiated inside a ScrollView. I am comparatively new to SwiftUI and I want to know if that is even the proper method. In the end I prefer to have this aspect react appropriately to orientation modifications, although perhaps the order of the pictures needs to be modified then. So, is utilizing GeometryReader the proper manner or are there higher methods to attain this?
Thanks very a lot, for serving to out.