Drawing Rectangles using a ForEach loop SwiftUI - swift

Question

Im trying to create a view of a rectangle with a given amount of rectangles inside of it,
i.e.Image
Im trying to recreate this with the option to pass in a size to add more levels to it, currently I've only managed to overlay
let colors: [Color] = [.red, .green, .blue]
var body: some View {
ZStack {
ForEach(colors, id: \.self) { color in
Text(color.description.capitalized)
.background(color)
}
}
}
which I found only whilst looking for the problem, the only issue I have is having adjustable size values which while using the loop can get progressively smaller, currently the closest I've got is this:
struct SquareContent{
var color: Color
var size: CGSize
}
struct GrannySquareComplete: View {
let colors: [SquareContent] = [
SquareContent.init(color: .red, size: CGSize(width: 100, height: 100)),
SquareContent.init(color: .white, size: CGSize(width: 80, height: 80)),
SquareContent.init(color: .red, size: CGSize(width: 80, height: 80))]
var body: some View {
ZStack {
ForEach(0...colors.count) { i in
Text("")
.frame(width: colors[i].size.width, height: colors[i].size.height)
.background(colors[i].color)
.border(.white)
}
}
}
}
but this returns an error of
No exact matches in call to initialiser
I believe this is due to the use of Text within the foreach loop but cannot figure out how to fix this.

Answer 1

To fix your error change ForEach(0...colors.count) { i in to
ForEach(0..<colors.count) { i in
To make it dynamic
//Make Identifiable
struct SquareContent: Identifiable{
//Add id
let id: UUID = UUID()
var color: Color
//Handle size based on screen
}
struct GrannySquareComplete: View {
//Change to #State
#State var colors: [SquareContent] = [
SquareContent.init(color: .red),
SquareContent.init(color: .white),
SquareContent.init(color: .red)]
var body: some View {
VStack{
//Mimic adding a square
Button("add square"){
colors.append(.init(color: [.blue, .black,.gray, .orange, .pink].randomElement()!))
}
ZStack(alignment: .center){
ForEach(Array(colors.enumerated()), id: \.offset) { (index, color) in
//Calculate the size by percentange based on index
let percentage: CGFloat = Double(colors.count - index)/Double(colors.count)
//Create a custom view to handle the details
SquareComplete(square: color, percentage: percentage)
}
}
}
}
}
struct SquareComplete: View {
let square: SquareContent
let percentage: CGFloat
var body: some View{
GeometryReader{ geo in
Rectangle()
//Make a square
.aspectRatio(1, contentMode: .fit)
.border(.white)
.background(square.color)
.foregroundColor(.clear)
//Center
.position(x: geo.size.width/2, y: geo.size.height/2)
//Adjust size by using the available space and the passed percentage
.frame(width: geo.size.width * percentage, height: geo.size.height * percentage, alignment: .center)
}
}
}
struct GrannySquareComplete_Previews: PreviewProvider {
static var previews: some View {
GrannySquareComplete()
}
}