SwiftUI中HStack放两个List/ScrollView时NavigationView无法折叠如何解决

问题原因 #

SwiftUI的NavigationView默认只会将导航栏折叠逻辑与层级中最靠近导航栏修饰符的单个可滚动视图绑定。将两个List放在HStack容器中时，HStack本身是不可滚动的，两个List的滚动事件无法被NavigationView捕获，因此滚动时无法触发导航栏折叠。

解决方案 #

方案1：调整导航栏修饰符挂载位置（兼容iOS 13+） #

将原来挂载在HStack上的navigationTitle、navigationBarItems等导航栏相关修饰符，移动到需要触发折叠的左侧List上，让导航栏直接监听该List的滚动事件：

struct ContentView: View {
    var body: some View {
        NavigationView {
            HStack(spacing: 0) {
                List(0..<21) { _ in
                    Text("Hello, world!").padding()
                }
                // 导航栏修饰符移到左侧List上
                .navigationTitle("Home")
                .navigationBarItems(leading: Button("Edit") {}, trailing: Button("Done") {})
                
                List(0..<21) { _ in
                    Text("Hello, world!").padding()
                }
            }
        }
    }
}

如果需要两个List滚动都能触发导航栏折叠，可给两个List都添加相同的导航栏修饰符即可。

方案2：使用NavigationView原生分栏布局（推荐，兼容iOS 14+） #

如果你的双列布局是为了实现侧边栏+详情页的分栏效果，不需要自定义HStack，直接用NavigationView的内置分栏样式即可，原生支持滚动触发导航栏折叠，适配性更好：

struct ContentView: View {
    var body: some View {
        NavigationView {
            // 左侧列表
            List(0..<21) { _ in
                Text("Hello, world!").padding()
            }
            .navigationTitle("Home")
            .navigationBarItems(leading: Button("Edit") {}, trailing: Button("Done") {})
            
            // 右侧详情列表
            List(0..<21) { _ in
                Text("Hello, world!").padding()
            }
        }
        // 强制双列并列展示，适配iPhone横屏、iPad场景
        .navigationViewStyle(.columns)
    }
}

如果项目最低支持iOS 16+，建议替换为NavigationSplitView，这是苹果最新推荐的分栏布局组件，API更稳定。

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