I wish to obtain a particular design with 7 photos. The 7 photos include 5 squares (800x800px unique) and a pair of rectangle (400x200px unique). The tip objective ought to appear to be this instance.
It needs to be 3 rows of images, row 1 consists of three squares, the place on is a couple of 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 going through is that once I add the view to the mother or father, I get that end result.
To attain this format I attempted to make use of a mix 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 can be completely different designs so you should definitely look out for that
GeometryReader { geo in
let measurement = geo.measurement.width * 0.66
VStack(spacing: 16) {
HStack(spacing: 16) {
Picture("tiles_square")
.resizable()
.scaledToFit()
.body(width: measurement)
VStack(spacing: 16) {
Picture("tiles_square")
.resizable()
.scaledToFit()
Picture("tiles_square")
.resizable()
.scaledToFit()
}
}
HStack(spacing: 16) {
Picture("tiles_landscape")
.resizable()
.scaledToFit()
.body(width: measurement)
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 right strategy. In the end I prefer to have this aspect react appropriately to orientation modifications, although possibly the order of the pictures needs to be modified then. So, is utilizing GeometryReader the right method or are there higher methods to realize this?
Thanks very a lot, for serving to out.