100 Days of SwiftUI

Day 41

2026-05-30

Project 8, part 3

Finishing the Moonshot app

Showing mission details with ScrollView and containerRelativeFrame()

  • nesting VStack()s to tweak alignments (image vs text)
  • adding parameters to the #Preview so you can see what you’re designing

Merging Codable structs

  • it’s kinda like a visible JOIN
  • uses .map which is a thing I don’t entirely understand
  • admonition that your data better be clean and present!
  • you can’t put a shaped border on a clipShape() – you need to use an overlay()

I tried using a background() with the same shape, but couldn’t get the border to follow

OH, border and strokeBorder are not the same thing

I did manage to create my own divideSection() view so I can use it multiple places

extension View {
    func divideSection() -> some View {
        Rectangle()
            .frame(height: 2)
            .foregroundStyle(.lightBackground)
            .padding(.vertical)
    }
}

(.lightBackground is in another extension based on ShapeStyle ... Color)

I figure eventually I’ll have a few files of “helpers”…

Finishing up with one last view

We have the main screen and the missions screen, now for the astronauts! It’s a simple view, where you pass in the Astronaut object and display the information within it.

At this point “astronaut” doesn’t look ever look correctly spelled.

 

Notice that we’ve done 3 days and haven’t finished the app just yet. They’re getting bigger!