SwiftUI Fundamentals

There are two main ingredients you need to get started with Navigation in SwiftUI.

First, you wrap the content at the top level inside a NavigationView.

With that, you can do things like add a navigation bar, and a nav bar title to your views.

When you want to navigate from that top level view to another, you use a NavigationLink.

This wraps a View into a tappable form that will transition you away to a another View that you specify in the NavigationLink Initializer.

This also makes it easy to pass along any required data models for that View. It does this by pushing the View onto the navigation stack, allowing users to swipe or tap the back button to dismiss it.

In this episode, you’re going to add a Navigation View and navigation links to a little starter app.

The starter project contains the Artwork.swift file. Artwork is a struct with quite a few properties.

Below that is artData, an array of Artwork instances. It’s a subset of the data used in one of our written tutorials about MapKit, featuring public artworks in Honolulu. See the authors notes for a link!

This is the data the app is using to fill in the List in ContentView.swift

Open ContentView.swift

Now, when you tap on a row, you would probably expect to go to a detail view of the artwork.

Open DetailView.swift

There’s a file set up for that, too!

Our first job is to connect these two views. And the first step is in ContentView

• We need to embed this list in a navigation View.

NavigationView {
  List(artworks) { artwork in ...}
}      

This gives you the root of a new navigation stack.

You can now access all the navigation things, like the navigation bar title.

List(artworks, id: \.self) { artwork in
}
.navigationTitle("Artworks")

Notice this modifies List, not NavigationView.

NavigationView also enables NavigationLink. This is the key to adding views to the navigation stack.

• It needs a destination view and a label.
• You can use the text that’s already there for a label.
• For the destination, make an instance of whatever view you want to navigate to. Like, the DetailView!
• And you can just pass in the artwork associated with this item in the List.

List(artworks, id: \.self) { artwork in
  NavigationLink(destination: DetailView(artwork: artwork)) {
    Text(artwork.title)
  }
}

Start up a live preview to test it out.

Live Preview

And there’s the detail we’re looking for!

Split View

So far, you’ve been looking at this project with an iPhone scheme.

Let’s see what it looks like on an iPad.

Pick an iPad scheme, then restart the Live Preview

It should look like… nothing.

Well, it’s an iPad, so SwiftUI shows you a split view by default. When an iPad is in a portrait orientation like this, you have to swipe from the leading edge to open the main list view, then select an item.

A blank screen isn’t your only option here, though!

You can add a specific DetailView after the List, but still inside the NavigationView.

DetailView(artwork: artworks[0])

And now the split view will load with your default detail view.

If you change the scheme back to an iPhone, you’ll see that this extra DetailView doesn’t mess up your layout on a smaller device.