7

I am trying to figure out why rotating the device makes the content go away.

This is the exact code I am running:

struct ContentView: View {
    @State private var selection = 0

    init() {

    }

    var body: some View {

        NavigationView {

            VStack {
                Button(action: {

                }) {
                    Text("Tap me")
                    .padding()
                    .foregroundColor(.white)
                    .background(Color.blue)
                    .cornerRadius(8)
                }.shadow(color: Color.blue, radius: 20, y: 5)
                    .frame(width: 300, height: 100, alignment: .trailing)

                Text("SwiftUI")
                    .navigationBarTitle("Nav Title")
            }

            Color.red.edgesIgnoringSafeArea([.top,.bottom,.leading,.trailing])

        }

    }
}

enter image description here

How can I fix this so rotating the device keeps content in view?

To provide more feedback after "Liem Vo" answer.

If I run the code on the iPhone 11 Pro, and not the max, it works. enter image description here

When running it on the max, the "primary view" goes off screen to the left in landscape and it can be pulled in by swiping on it. I wasn't aware of this behavior using NavigationView in SwiftUI, so that's what got me.

Here's the behavior on the MAX without the fix suggested by "Liem Vo": enter image description here

2
  • Remove that Color.red below VStack.
    – Asperi
    Commented Jan 6, 2020 at 20:28
  • I've just done that to try it out. Does not work. Same problem.
    – zumzum
    Commented Jan 6, 2020 at 20:35

3 Answers 3

7

The problem is with the landscape mode the view is changed so you need to handle the view in a different mode.

Create an extension method as below

extension View {
    func phoneOnlyStackNavigationView() -> some View {
        if UIDevice.current.userInterfaceIdiom == .phone {
            return AnyView(self.navigationViewStyle(StackNavigationViewStyle()))
        } else {
            return AnyView(self)
        }
    }
}

And use this method in your view.

struct ContentView: View {
    @State private var selection = 0
    var body: some View {

        NavigationView {

            VStack {
                Button(action: {

                }) {
                    Text("Tap me")
                        .padding()
                        .foregroundColor(.white)
                        .background(Color.blue)
                        .cornerRadius(8)
                }.shadow(color: Color.blue, radius: 20, y: 5)
                    .frame(width: 300, height: 100, alignment: .trailing)

                Text("SwiftUI")
                    .navigationBarTitle("Nav Title")
            }

            Color.red.edgesIgnoringSafeArea([.top,.bottom,.leading,.trailing])

        }
        .phoneOnlyStackNavigationView()

    }
}

More detail you can refer from https://www.hackingwithswift.com/books/ios-swiftui/making-navigationview-work-in-landscape

2
  • I used this approach for my landscape only application and I can't get rid of NavigationBar... Do you have any suggestions how to achieve this?
    – parbo
    Commented Feb 20, 2020 at 8:59
  • Using UIDevice is the wrong way to approach this, especially if you plan on supporting multiwindow support on the iPad. Commented Sep 13, 2020 at 19:46
2

All of the above answers are not quite complete, so I would like to add, because I have studied this question for a long time and this is what I came to. I think it will be useful:

One of the interesting things about Navigation View is how it also performs the split-screen function on large devices-usually iPhones and large iPads.

var body: some View {
        NavigationView {
            Text("Primary")
        }
    }

If you rotate to landscape orientation (Cmd + ->) of the iPhone 11 ProMax, you will see that the text view disappears.

SwiftUI automatically considers landscape navigation views and shows DetailView instead of main ("Primary").

You can solve the problem the way SwiftUI expects by providing two views inside your NavigationView, for instance:

var body: some View {
        NavigationView {
            Text("Primary")
            Text("Secondary")
        }
    }

Since I have little reputation, I can only post a photo with a link (If my post was useful, please rate it): enter image description here

This is why the error "Unable to simultaneously satisfy constraints" is thrown if we add. navigation Bar Title(Text ("Test"), displayMode:. inline)

Therefore, the solution is as follows:

  1. Add a second view to the Navigation View

Here, when you rotate the screen, screen # 2 - Text("Secondary") will be displayed.

    var body: some View {
            NavigationView {
                Text("Primary")
                Text("Secondary")
            .navigationBarTitle(Text("Test"), displayMode: .inline)
            }
    }
  1. Modifier .navigationViewStyle(StackNavigationViewStyle())

However, if you want to explicitly specify that the first screen (Text("Primary")) is always displayed when you rotate, then you need to add the .navigationViewStyle(StackNavigationViewStyle) modifier()) , which allows you to always switch to Text ("Primary"), regardless of the screen.

var body: some View {
        NavigationView {
            Text("Primary")
            Text("Secondary")
        .navigationBarTitle(Text("Today's Flavors"), displayMode: .inline)
        }
        .navigationViewStyle(StackNavigationViewStyle())

Solution special for you:

struct Test: View {
    @State private var selection = 0
    
    var body: some View {
        
        NavigationView {
            
            ZStack {
                Color.red.edgesIgnoringSafeArea([.all])
                VStack {
                    Button(action: {
                        
                    }) {
                        Text("Tap me")
                            .padding()
                            .foregroundColor(.white)
                            .background(Color.blue)
                            .cornerRadius(8)
                    }.shadow(color: Color.blue, radius: 20, y: 5)
                    .frame(width: 300, height: 100, alignment: .trailing)
                    
                    Text("SwiftUI")
                        .navigationBarTitle("Nav Title")
                }
            }
            
        }
        // that means only show one view at a time no matter what device I'm working
        .navigationViewStyle(StackNavigationViewStyle())
    }
}

Result: enter image description here

Also, you can read, more about NavigationView here

1
  • This worked. For SwiftUI 3, add the .navigationViewStyle(.stack) modifier to your NavigationView.
    – aryanm
    Commented Oct 18, 2021 at 3:53
0

I would like to propose an improved version based on the existing solution. Instead of hardcoding it to StackNavigationViewStyle() on iPhone, it just extends the already existing .navigationViewStyle() modifier and adds a condition so that you can decide which style to use based on the sizeClass of your view. This is important because apps on iPad sometimes have to display with an "iPhone" size, and deciding the navigation style based on the UIUserInterfaceIdiom alone is not enough!

extension View {
    public func navigationViewStyle<S>(_ style: S, condition: Bool) -> some View where S : NavigationViewStyle {
        if condition {
            return AnyView(self.navigationViewStyle(style))
        } else {
            return AnyView(self)
        }
    }
}

You would use it like this:

struct ListView: View {
    @Environment(\.horizontalSizeClass) var horizontalSizeClass: UserInterfaceSizeClass?
    @Environment(\.verticalSizeClass) var verticalSizeClass: UserInterfaceSizeClass?
    
    var body: some View {
        NavigationView {
            List(0 ..< 5) {
                Text("Hello, World!")
            }
            .navigationViewStyle(StackNavigationViewStyle(), condition: horizontalSizeClass != .regular && verticalSizeClass != .regular)
        }
    }
}

This would result in StackNavigationViewStyle() being applied when the sizeClass is not .regular (iPhone) and the default DoubleColumnNavigationViewStyle() when sizeClass is .regular like on iPad in a full screen app.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.