Navigation List that Links to other pages

App Development
1

I’ve built the individual pages in SwiftUI, now I want to create a navigation list that links to each of them. Best way to do this? Not using Storyboard because I built each view individually. The Developer Tools example explains how to build each view, but uses JSON data to finalize the app. I don’t have that much data.

2

I’m not sure that I understand your question but just to clarify things initially, was the Application created initially in SwiftUI?

Do you need to pass data back and forth from your primary view to each of the other pages (Views)?

3

Hey There!
Yes, I created each view in SwiftUI and they’re all functioning (even some animations that took a while to get working)…
The pages are static so basically it’s a table of contents that would link, for example, “Business Information” to the Business information page and then you could go from the business page, back to the table of contents. Very similar to the Apple Tutorial ‘Landmarks’ app, without the JSON data.

4

@BrettLarson
Hi Brett,

Sorry about the delay in responding but I never received a notification that you replied. If you wanted to set up Navigation links based on a Button or an Image or whatever you intend to set up, this is an option.

struct ContentView: View {
    var body: some View {
        NavigationView {
            List {                    
                NavigationLink(destination: BusinessInformation()) {
                    Text("Business Information")
                }
                NavigationLink(destination: Products()) {
                    Text("Products")
                }
                NavigationLink(destination: Contacts()) {
                    Text("Contacts")
                }
            }
            .navigationBarTitle("Acme Corporation")
        }
    }
}

Instead of a List you could substitute List for VStack with some spacing between elements.

struct ContentView: View {
    var body: some View {
        NavigationView {
            VStack(spacing: 100) {
                NavigationLink(destination: BusinessInformation()) {
                    Text("Business Information")
                        .font(.title)
                }
                NavigationLink(destination: Products()) {
                    Text("Products")
                        .font(.title)
                }
                NavigationLink(destination: Contacts()) {
                    Text("Contacts")
                        .font(.title)
                }
            }
            .navigationBarTitle("Acme Corporation")
        }
    }
}
5

Chris!
This is amazing and it’s exactly what I needed! Thank you so much for your help and the code!

/Brett

1 Like
6

Is there a limit on the number of items you can have in a list?

7

Yes, in any View you can only have a maximum of 10 Views so to get around that you wrap each 10 in a Group or another VStack or HStack… (if that makes sense to do so) etc

10 views can be a combination of Spacer(), Button, Image, ForEach, Picker… so it can be challenging at times to Group things or if necessary, refactor some of the elements out to their own View.

8

That is challenging. I’ve tried, unsuccessfully, to build this out using JSON data but am running into issues at every turn. Thank you so much for your help! It got most of it working.