Day 20 challenge -- a fancier 3x3 grid

@ha1neux HWS+

15d

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack (spacing: -1){
            HStack (spacing: -1){
                ZStack{
                    Rectangle()
                     .fill(Color.white)
                     .frame(width: 100, height: 100)
                    Text("1")
                        .font(.title)

                }
                .border(Color.black)
                ZStack{
                    Rectangle()
                     .fill(Color.white)
                     .frame(width: 100, height: 100)
                    Text("2")
                        .font(.title)

                }
                .border(Color.black)
                ZStack{
                    Rectangle()
                     .fill(Color.white)
                     .frame(width: 100, height: 100)
                    Text("3")
                        .font(.title)

                }
                .border(Color.black)
            }
            HStack (spacing: -1)
            {
                ZStack{
                    Rectangle()
                     .fill(Color.white)
                     .frame(width: 100, height: 100)
                    Text("4")
                        .font(.title)

                }
                .border(Color.black)
                ZStack{
                    Rectangle()
                     .fill(Color.white)
                     .frame(width: 100, height: 100)
                    Text("5")
                        .font(.title)

                }
                .border(Color.black)
                ZStack{
                    Rectangle()
                     .fill(Color.white)
                     .frame(width: 100, height: 100)
                    Text("6")
                        .font(.title)

                }
                .border(Color.black)
            }
            HStack (spacing: -1){
                ZStack{
                    Rectangle()
                     .fill(Color.white)
                     .frame(width: 100, height: 100)
                    Text("7")
                        .font(.title)

                }
                .border(Color.black)
                ZStack{
                    Rectangle()
                     .fill(Color.white)
                     .frame(width: 100, height: 100)
                    Text("8")
                        .font(.title)

                }
                .border(Color.black)
                ZStack{
                    Rectangle()
                     .fill(Color.white)
                     .frame(width: 100, height: 100)
                    Text("9")
                        .font(.title)

                }
                .border(Color.black)
            }
        }
        .padding()
    }
}

#Preview {
    ContentView()
}

@NigelGee HWS+

15d

This is how I would do it

struct ContentView: View {
    let columns = Array(repeating: GridItem(.flexible(), spacing: 0), count: 3)

    var body: some View {
        LazyVGrid(columns: columns, spacing: 0) {
            ForEach(1..<10) { number in
                ZStack {
                    Rectangle()
                        .stroke(lineWidth: 1)
                        .frame(width: 100, height: 100)

                    Text("\(number)")
                        .font(.title)

                }
            }
        }
        .frame(maxWidth: 300)
    }
}

@Obelix

15d

Nigel writes

This is how I would do it....

ZStack {
    Rectangle()
        .stroke(lineWidth: 1)
        .frame(width: 100, height: 100)
    Text("\(number)")
        .font(.title)
}

Here's how I would use overlay instead of ZStack:

// One Cell
struct CellView: View {
    var fillColor: Color      = Color.white
    var frameSize: CGFloat    = 75
    var content:   String     = "📎"
    var body: some View {
        Rectangle()
            .fill(fillColor)
            .frame(width: frameSize, height: frameSize)
            // 👇🏼  Instead of ZStack
            .overlay { Text(content).font(.title) }
            .border( Color.black )
    }
}

// SwiftUI is declarative. Declare what you want to see!
CellView( content: "3" ) // Use defaults except for content

@ygeras

15d

Ok will throw in my two cents :) Many ways....

struct ContentView: View {
    var body: some View {
        Grid(horizontalSpacing: -1, verticalSpacing: -1) {
            ForEach (0..<3) { row in
                GridRow {
                    ForEach (1..<4) { col in
                        Rectangle().fill(Color.white)
                            .strokeBorder(Color.black, lineWidth: 1)
                            .overlay(
                                Text("\(row * 3 + col)")
                            )
                            .frame(width: 100, height: 100)
                    }
                }
            }
        }
    }
}

	@ha1neux HWS+ 15d import SwiftUI struct ContentView: View { var body: some View { VStack (spacing: -1){ HStack (spacing: -1){ ZStack{ Rectangle() .fill(Color.white) .frame(width: 100, height: 100) Text("1") .font(.title) } .border(Color.black) ZStack{ Rectangle() .fill(Color.white) .frame(width: 100, height: 100) Text("2") .font(.title) } .border(Color.black) ZStack{ Rectangle() .fill(Color.white) .frame(width: 100, height: 100) Text("3") .font(.title) } .border(Color.black) } HStack (spacing: -1) { ZStack{ Rectangle() .fill(Color.white) .frame(width: 100, height: 100) Text("4") .font(.title) } .border(Color.black) ZStack{ Rectangle() .fill(Color.white) .frame(width: 100, height: 100) Text("5") .font(.title) } .border(Color.black) ZStack{ Rectangle() .fill(Color.white) .frame(width: 100, height: 100) Text("6") .font(.title) } .border(Color.black) } HStack (spacing: -1){ ZStack{ Rectangle() .fill(Color.white) .frame(width: 100, height: 100) Text("7") .font(.title) } .border(Color.black) ZStack{ Rectangle() .fill(Color.white) .frame(width: 100, height: 100) Text("8") .font(.title) } .border(Color.black) ZStack{ Rectangle() .fill(Color.white) .frame(width: 100, height: 100) Text("9") .font(.title) } .border(Color.black) } } .padding() } } #Preview { ContentView() }
	@NigelGee HWS+ 15d This is how I would do it `struct ContentView: View { let columns = Array(repeating: GridItem(.flexible(), spacing: 0), count: 3) var body: some View { LazyVGrid(columns: columns, spacing: 0) { ForEach(1..<10) { number in ZStack { Rectangle() .stroke(lineWidth: 1) .frame(width: 100, height: 100) Text("\(number)") .font(.title) } } } .frame(maxWidth: 300) } }`
	@Obelix 15d Nigel writes This is how I would do it.... `ZStack { Rectangle() .stroke(lineWidth: 1) .frame(width: 100, height: 100) Text("\(number)") .font(.title) }` Here's how I would use `overlay` instead of `ZStack`: `// One Cell struct CellView: View { var fillColor: Color = Color.white var frameSize: CGFloat = 75 var content: String = "📎" var body: some View { Rectangle() .fill(fillColor) .frame(width: frameSize, height: frameSize) // 👇🏼 Instead of ZStack .overlay { Text(content).font(.title) } .border( Color.black ) } } // SwiftUI is declarative. Declare what you want to see! CellView( content: "3" ) // Use defaults except for content`
	@ygeras 15d Ok will throw in my two cents :) Many ways.... `struct ContentView: View { var body: some View { Grid(horizontalSpacing: -1, verticalSpacing: -1) { ForEach (0..<3) { row in GridRow { ForEach (1..<4) { col in Rectangle().fill(Color.white) .strokeBorder(Color.black, lineWidth: 1) .overlay( Text("\(row * 3 + col)") ) .frame(width: 100, height: 100) } } } } } }`

Reply to this topic…