WWDC24 SALE: Save 50% on all my Swift books and bundles! >>

Day 20 challenge -- a fancier 3x3 grid

Forums > 100 Days of SwiftUI

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()
}

   

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)
    }
}

   

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

   

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)
                    }
                }
            }
        }
    }
}

   

Save 50% in my WWDC sale.

SAVE 50% To celebrate WWDC24, all our books and bundles are half price, so you can take your Swift knowledge further without spending big! Get the Swift Power Pack to build your iOS career faster, get the Swift Platform Pack to builds apps for macOS, watchOS, and beyond, or get the Swift Plus Pack to learn advanced design patterns, testing skills, and more.

Save 50% on all our books and bundles!

Reply to this topic…

You need to create an account or log in to reply.

All interactions here are governed by our code of conduct.

 
Unknown user

You are not logged in

Log in or create account
 

Link copied to your pasteboard.