NavigationView嵌套TabView与List时导航标题动画失效

问题根源 #

当TabView作为NavigationView/NavigationStack的直接子视图时，内部List的滚动事件无法传递到上层导航栏，导致标题缩放、对齐切换以及背景透明度变化的默认交互失效。

修复思路 #

让每个Tab页的可滚动视图（List）直接隶属于自己的导航容器，确保滚动事件能正确触发导航栏的动态效果。具体来说，就是给每个Tab的内容单独嵌套NavigationStack（iOS 16+）或NavigationView（iOS 15及更早版本）。

修正代码 #

import SwiftUI

struct MainView: View {
    var body: some View {
        // iOS 16+使用NavigationStack，iOS 15及以下替换为NavigationView
        NavigationStack {
            NavigationLink(destination: TestView()) {
                MainButton(title: "Press Me")
            }
            .navigationTitle("Welcome")
        }
    }
}

struct MainButton: View {
    var title: String
    var body: some View {
        Text(title).font(.title)
    }
}

struct TestView: View {
    @State var selectedTab = 0
    
    var body: some View {
        TabView(selection: $selectedTab) {
            // 第一个Tab单独嵌套NavigationStack
            NavigationStack {
                List {
                    ForEach(0..<100) { i in
                        Text("Test Tab 0 row \(i)")
                    }
                }
                .listStyle(.plain)
                .navigationTitle("Page 1 Tab 1")
            }
            .tabItem {
                Image(systemName: "face.smiling")
                Text("tab1")
            }
            .tag(0)
            
            // 第二个Tab同样嵌套NavigationStack
            NavigationStack {
                List {
                    ForEach(0..<20) { i in
                        Text("Test Tab 1 row \(i)")
                    }
                }
                .listStyle(.plain)
                .navigationTitle("Page 1 Tab 2")
            }
            .tabItem {
                Image(systemName: "face.smiling.inverse")
                Text("tab2")
            }
            .tag(1)
        }
    }
}

struct TestView_Previews: PreviewProvider {
    static var previews: some View {
        MainView()
    }
}

额外说明 #

• 移除了原TestView外层的.navigationTitle("Tab Views")，改为每个Tab内部独立设置导航标题，符合不同Tab页的内容逻辑
• 若需要统一的导航栏操作按钮（如自定义返回按钮），可以在TestView的TabView外层添加，或在每个Tab的NavigationStack中单独配置
• 该方案完美还原了滚动时导航栏的默认交互：向下滚动时标题缩小居中、背景变灰；滚动到顶部时标题放大左对齐、背景透明

内容的提问来源于stack exchange，提问作者Ievgen