CODEWITHSUNDEEP
iosmacosswiftuiipados
mica
mica

Reputation: 4308

Switch SwiftUI NavigationView from a 3-column Layout to a "stacked" Layout

I have the following SwiftUI 3-column Layout with a NavigationView which works fine.
If the window is becoming very small (width) on a Mac or the app runs in split screen on iPad I would like to change the NavigationViews behaviour like it is on a iPhone ( stack of views).

Is that possible?

struct MainNav: View {
    var body: some View {
      NavigationView{
        SideBar()
        MainView()
        Detail()
      }
      //.navigationViewStyle(DoubleColumnNavigationViewStyle())
    }
}

struct SideBar: View {
  var body: some View {
    Text("sidebar")
    NavigationLink("Main", destination: MainView() )
    NavigationLink("Text", destination: Text("from Sidebar"))
  }
}

struct MainView: View {
  var body: some View {
    VStack {
      Text("MAIN")
      NavigationLink("TEXT1", destination: Text("1  from main") )
      NavigationLink("TEXT2", destination: Text("2  from main") )
      NavigationLink("detail", destination: Detail())
    }
  }
}

struct Detail: View {
  var body: some View {
    VStack{
    Text("detail")
    NavigationLink("TEXT", destination: Text("from detail") )
    }
  }
}

Upvotes: 0

Views: 1135

Answers (1)

Adam
Adam

Reputation: 5105

If you don’t set a navigationViewStyle, then the iPad should automatically collapse to the “stack” style in split screen (or at least the smaller sizes of split screen).

I don’t think you can do the same on macOS. In fact, I’m not sure the “stack” style works at all on Big Sur.

Upvotes: 1

Related Questions