SwiftUI Fundamentals

Now that you’ve got a bit of experience navigating between views, it’s time for a challenge.

I’ve got another little starter app for you. It has multiple views in it, but they aren’t connected.

Your challenge is to hook up the navigation, and pass along the required data.

Look for the TODO’s in the project comments for some hints if you get stuck.

Go ahead and give this a try, then check back here when you’re done for my solution.

OK here we go!

These are the Directions /*

• Everything you need is in this file!
• I need an iPad scheme for previews
• Add Navigation from each row in the list of tracks to a DetailView for that track
• Try presenting a popover when the MeowMixHeader is tapped. */

I’ll start at the top, again.

Add a NavigationView

NavigationView {
  VStack(spacing: 0.0) {
}

This suggests I try using the .navigationViewStyle modifier on the NavigationView with a StackNavigationViewStyle()

.navigationViewStyle(StackNavigationViewStyle())

Aha! That gets rid of the sliding out split-screen layout.

Now I’ll try hiding the navigation bar with .navigationBarHidden

  FeaturedCats(artists: mix.tracks.map(\.artist))
    .padding(.vertical)
    .background(Color.gray.opacity(0.2))
}
.navigationBarHidden(true)

Again, unlike that NavigationViewStyle modifier, changes to the navigation bar are made to views inside of the navigationView, and not the navigationView itself.

The next thing was to add Navigation from each row in the list of tracks to a DetailView for that track.

So, I’ll create a NavigationLink inside of this List And pop the TrackRow into the label argument And for the destination, I’ll use the DetailView, like the directions say.

List(mix.tracks) { track in
  NavigationLink(
    destination: DetailView(track: track),
    label: {
      TrackRow(track: track)
    })
}

I can try that out with a live preview…

Wow, what colorful detail!

OK, the last bit was to try to present a popover when the MeowMixHeader is tapped.

I know I’ll need a bindable boolean for that

@State private var showMessage = false

And I can trigger it with this tap gesture recognizer attached to the mix header.

.onTapGesture {
  showMessage = true
}

Then I can add the popover modifier!

It really is just like the sheet. Pass in a binding to the boolean, and add the MessagePopover view to the content closure.

.popover(isPresented: $showMessage, content: {
  MessagePopover()
})

Try that out in the live preview…

There’s our little popover view! And you just click anywhere else to dismiss it.

And we’re done!