NavigationSplitView with TabView: top bar doesn’t always shrink

Given the following SwiftUI view, I get inconsistent behaviour in the topbar. After switching tabs, it will sometimes get stuck in ‘big title’ mode instead of shrinking to the compact mode with a gray background. According to the documentation this matter of nesting is allowed and should work, but I’m having trouble.

        NavigationSplitView {
            TabView {
                ScrollView {
                    Text("This is tab 1").font(.title)
                        .padding()
                        .frame(maxWidth: .infinity, alignment: .leading)
                    Text("(a long text)")
                        .padding()
                        .frame(maxWidth: .infinity, alignment: .leading)
                }
                    .tabItem { Label("Tab 1", systemImage: "1.circle.fill") }
                
                ScrollView {
                    Text("This is tab 2").font(.title)
                        .padding()
                        .frame(maxWidth: .infinity, alignment: .leading)
                    Text("(a long text)")
                        .padding()
                        .frame(maxWidth: .infinity, alignment: .leading)
                }
                    .tabItem { Label("Tab 2", systemImage: "2.circle.fill") }
            }
            .navigationTitle("A title")
            .toolbar {
                Button("Demo") { }
            }
        } detail: {
        }

This screenshot shows the correct behaviour:
enter image description here

This shows the incorrect behaviour that often occurs:
enter image description here

Repository at https://github.com/martijn/swiftui-navigationtitle-issue

  • TabView is meant to always be at the top it can’t be inside the NavigationSplitView

    – 




Leave a Comment