SwiftUI official tutorial (six)

6. Set navigation between lists and details

Although the list has been able to show, but we can not by clicking a single landmark to landmark view the details page. SwiftUI Tutorial

The  list embedding a  NavigationView medium, and each of the  row nest in a  NavigationButton the set to transition the target view, so that  list it has a navigation function.

6.1 automatically create a landmark  list embedded in a  NavigationView medium.

LandmarkList.swift

import SwiftUI

struct LandmarkList: View {
    var body: some View {
        NavigationView {
            List(landmarkData) { landmark in
                LandmarkRow(landmark: landmark)
            }
        }
    }
}

struct LandmarkList_Previews: PreviewProvider {
    static var previews: some View {
        LandmarkList()
    }
}

Call the  navigationBarTitle(_:) method to set the  list title of the navigation bar is displayed.

LandmarkList.swift

import SwiftUI

struct LandmarkList: View {
    var body: some View {
        NavigationView {
            List(landmarkData) { landmark in
                LandmarkRow(landmark: landmark)
            }
            .navigationBarTitle(Text("Landmarks"))
        }
    }
}

struct LandmarkList_Previews: PreviewProvider {
    static var previews: some View {
        LandmarkList()
    }
}

6.3 in  list the closure, the return of  row packaging in a  NavigationButton medium, and the  LandmarkDetailview target. SwiftUI Tutorial

LandmarkList.swift

import SwiftUI

struct LandmarkList: View {
    var body: some View {
        NavigationView {
            List(landmarkData) { landmark in
                NavigationButton(destination: LandmarkDetail()) {
                    LandmarkRow(landmark: landmark)
                }
            }
            .navigationBarTitle(Text("Landmarks"))
        }
    }
}

struct LandmarkList_Previews: PreviewProvider {
    static var previews: some View {
        LandmarkList()
    }
}

6.4 switching to the live mode may attempt to navigate directly in the preview function. Click the  Live Preview button, and then click landmarks to access the details page.