1

I'm learning SwiftUI and following through with Apple's 'Landmark' tutorial and then taking the examples and trying to make my own using that knowledge.

However, I'm really missing some understanding because I can't see why I'm getting non-standard behaviour.

Apples code:

struct CategoryHome: View
{
    var body: some View
    {
        NavigationView
        {
            Text("Landmarks Content")
                .navigationBarTitle(Text("Featured"))
        }
    }
}

And it produces this:

enter image description here

My code:

struct ContentView: View
{
    @State private var selection: String? = nil
    
    var body: some View
    {
        NavigationView
        {
            NavigationLink(destination: Text("Second View"), tag: "Second", selection: $selection) { EmptyView() }
            NavigationLink(destination: Text("Third View"),  tag: "Third",  selection: $selection) { EmptyView() }
            NavigationLink(destination: Text("Forth View"),  tag: "Forth",  selection: $selection) { EmptyView() }
        
            VStack
            {
                Text("Content View")
                Spacer()
                Button("Press to goto 2nd view", action: { self.selection = "Second" })
                Button("Press to goto 3rd view", action: { self.selection = "Third" })
                Button("Press to goto 4th view", action: { self.selection = "Forth" })
                Spacer()
            }
        }
        .navigationBarTitle("Home")
    }
}

And it produces this:

enter image description here

This is on the iPhone 11 simulator.

Can someone please explain, simply, why these are so different and why I'm not getting the results I want (which is a home 'screen' with a title, 3 buttons, when in portrait on an iPhone.

iOSProgrammingIsFun
  • 1,418
  • 1
  • 15
  • 32

1 Answers1

3

NavigationView expects inside one view (not a bulk of views), so below is possible solution (tested with Xcode 12 / iOS 14):

struct ContentView: View
{
    @State private var selection: String? = nil
    
    var body: some View
    {
        NavigationView
        {
            VStack
            {
                Text("Content View")
                Spacer()
                Button("Press to goto 2nd view", action: { self.selection = "Second" })
                Button("Press to goto 3rd view", action: { self.selection = "Third" })
                Button("Press to goto 4th view", action: { self.selection = "Forth" })
                Spacer()
            }
            .background(Group {
                    NavigationLink(destination: Text("Second View"), tag: "Second", selection: $selection) { EmptyView() }
                    NavigationLink(destination: Text("Third View"),  tag: "Third",  selection: $selection) { EmptyView() }
                    NavigationLink(destination: Text("Forth View"),  tag: "Forth",  selection: $selection) { EmptyView() }
            })
                .navigationBarTitle("Home")
        }
    }
}

demo

Asperi
  • 228,894
  • 20
  • 464
  • 690