SwiftUI中双List并排搭配NavigationView的滚动异常问题排查

首先明确：你遇到的问题不是SwiftUI的Bug，而是NavigationView的默认设计逻辑导致的——它只会和直接子视图里的第一个可滚动视图建立滚动联动关系。在你的代码里，NavigationView的直接子视图是HStack（一个非滚动容器），所以内部的两个List都无法触发导航栏的背景切换，同时第一个List的顶部布局没有正确关联导航栏的安全区域，导致内容滑到导航栏下方。

下面给出两种针对性的解决方案，适配不同iOS版本：

方案1：适配iOS 13+（基于NavigationView） #

把导航标题附加到第一个List上，让NavigationView将这个List识别为主要滚动视图，从而建立正确的联动：

struct ContentView: View {
    var body: some View {
        NavigationView {
            HStack(spacing: 0) {
                List {
                    Section(header: Text("Header left")) {
                        ForEach(0..<600) { integer in
                            Text("\(integer)")
                        }
                    }
                }
                .listStyle(InsetGroupedListStyle())
                .frame(minWidth: 0, maxWidth: .infinity)
                // 将导航标题绑定到第一个List，触发滚动联动
                .navigationTitle("Example")
                .navigationBarTitleDisplayMode(.large) // 明确大标题模式，可选但推荐

                List {
                    Section(header: Text("Header right")) {
                        ForEach(0..<400) { integer in
                            Text("\(integer)")
                        }
                    }
                }
                .listStyle(InsetGroupedListStyle())
                .frame(minWidth: 0, maxWidth: .infinity)
            }
        }
        .navigationViewStyle(StackNavigationViewStyle())
    }
}

修改后，第一个List滚动时，导航栏会自动切换背景色，内容也不会再滑到导航栏下方。

方案2：适配iOS 16+（推荐，基于NavigationStack） #

如果你只需要支持iOS 16及以上版本，建议使用NavigationStack替代NavigationView——它的滚动联动机制更智能，不需要额外调整就能正确识别内部的滚动视图：

struct ContentView: View {
    var body: some View {
        NavigationStack {
            HStack(spacing: 0) {
                List {
                    Section(header: Text("Header left")) {
                        ForEach(0..<600) { integer in
                            Text("\(integer)")
                        }
                    }
                }
                .listStyle(InsetGroupedListStyle())
                .frame(minWidth: 0, maxWidth: .infinity)

                List {
                    Section(header: Text("Header right")) {
                        ForEach(0..<400) { integer in
                            Text("\(integer)")
                        }
                    }
                }
                .listStyle(InsetGroupedListStyle())
                .frame(minWidth: 0, maxWidth: .infinity)
            }
            .navigationTitle("Example")
        }
    }
}

使用NavigationStack后，任意一个List滚动时，导航栏都会正确响应背景变化，同时内容布局也会自动适配安全区域。

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