How to draw a grid of items depending on GeometryReader - ios

Question

I am learning SwiftUI and as an end goal of the current project, I would like to draw bezier paths, each on its own layer, which could be modified on interaction (e.g. change color on tap) and also be able to resize the whole group on magnification gesture.
For testing purpose, I wanted to create a grid of rounded squares (which are going to be replaced by arbitrary bezier path in the future) and display the grid on the screen.
The code is the following:
import SwiftUI
struct PathView: View {
#State var scale: CGFloat = 1.0
var body: some View {
let overlayContent = VStack(alignment: .leading) {
Text("Hello")
}
.padding()
GeometryReader {
geometry in
let rectangles: [GridItem] = getSquareGrid(width: geometry.size.width, height: geometry.size.height, count: 10)
var rects = ZStack {
ForEach(rectangles) { rectangle in
RoundedRectangle(cornerRadius: rectangle.cornerRadius, style: /*#START_MENU_TOKEN#*/.continuous/*#END_MENU_TOKEN#*/)
.fill(rectangle.color)
.frame(width: rectangle.size, height: rectangle.size, alignment: /*#START_MENU_TOKEN#*/.center/*#END_MENU_TOKEN#*/)
.offset(x: rectangle.offsetX, y: rectangle.offsetY)
.onTapGesture {
print("rectangle \(rectangle.id) tapped")
}
}
}.scaledToFit()
.scaleEffect(scale)
.gesture(MagnificationGesture()
.onChanged({ (scale) in
self.scale = scale.magnitude
})
.onEnded({ (scaleFinal) in
self.scale = scaleFinal
}))
return rects.drawingGroup()
.overlay(overlayContent, alignment: .topLeading)
}
}
}
struct GridItem: Identifiable {
let size: CGFloat
let offsetX: CGFloat
let offsetY: CGFloat
let cornerRadius: CGFloat
let color: Color
let id = UUID()
init(size: CGFloat, offsetX: CGFloat, offsetY: CGFloat, cornerRadius: CGFloat, color: Color) {
self.size = size
self.offsetX = offsetX
self.offsetY = offsetY
self.cornerRadius = cornerRadius
self.color = color
}
}
func getSquareGrid(width: CGFloat, height: CGFloat, count: Int) -> [GridItem] {
var rectangleArray: [GridItem] = []
let size = min(width, height)
let rectangleSize = round(size/CGFloat(count))
for row in 0...count - 1 {
for column in 0...count - 1 {
let rect = GridItem(size: rectangleSize, offsetX: CGFloat(column) * rectangleSize, offsetY: CGFloat(row) * rectangleSize, cornerRadius: 25.0, color: Color.red)
rectangleArray.append(rect)
}
}
return rectangleArray
}
struct PathView_Previews: PreviewProvider {
static var previews: some View {
PathView()
}
}
This version is unable to build due to the following error:
Unable to infer complex closure return type; add explicit type to
disambiguate
In order to get the available space dimensions, I used GeometryReader and passed its dimensions to the function getSquareGrid().
Does anyone know how to appropriately use GeometryReader in this case or anyhow get the dimensions in order to fill the available screen with generated grid?

Answer 1

The code is not testable due to absent dependencies, but try the following
let drawnRects = rects.drawingGroup()
return drawnRects
.overlay(overlayContent, alignment: .topLeading)
replace with
rects.drawingGroup()
.overlay(overlayContent, alignment: .topLeading)
Update: actually if I replace overlayContent with just Text("test") it complied well.