SwiftUI中List内嵌VStack后NavigationLink首次pop后无法跳转问题

问题根本原因 #

这是iOS 15及以上版本SwiftUI的已知bug：当List内所有NavigationLink被包裹在同一个直接子VStack中时，SwiftUI会将整段VStack识别为单个List Cell，导航栈回退后该Cell的交互状态未被正确重置，导致后续导航触发失效。

可行解决方案 #

方案1：拆分VStack为List独立子项（最推荐，兼容全版本） #

直接移除多余的VStack嵌套，将标题和ForEach作为List的直接子元素，若需要分组样式可用Section包裹标题，同时支持直接添加下拉刷新特性：

struct ContentView: View {
    var body: some View {
        NavigationView {
            List {
                Text("Options").font(.largeTitle).bold()
                ForEach(1..<5, id:\.self) { counter in
                    NavigationLink(destination: SubView(counter: counter)) {
                        Text("Press Me \(counter)").font(.headline)
                    }
                    .buttonStyle(PlainButtonStyle())
                }
            }
            .listStyle(.grouped)
            // 下拉刷新直接加在这里即可正常使用
            .refreshable {
                // 你的刷新逻辑
            }
        }
    }
}

struct SubView: View {
    var counter: Int
    @State private var showDetails = false
    var body: some View {
        VStack(alignment: .leading) {
            Button("Show details") {
                showDetails.toggle()
            }
            
            if showDetails {
                Text("Clicked")
                    .font(.largeTitle)
            }
        }
    }
}

方案2：保留VStack的话，外层套Section #

如果确实需要VStack统一管理整组内容的样式、布局，只需在VStack外层套一层Section即可修复状态失效问题：

List {
    Section {
        VStack {
            Text("Options").font(.largeTitle).bold()
            ForEach(1..<5, id:\.self) { counter in
                NavigationLink(destination: SubView(counter: counter)) {
                    Text("Press Me \(counter)").font(.headline)
                }
                .buttonStyle(PlainButtonStyle())
            }
        }
    }
}
.listStyle(.grouped)

方案3：iOS 16+ 用显式navigationDestination #

使用iOS16推出的显式路由API，彻底避免隐式NavigationLink的状态bug：

struct ContentView: View {
    @State private var selectedCounter: Int?
    var body: some View {
        NavigationStack { // 优先用NavigationStack替代已废弃的NavigationView
            List {
                VStack {
                    Text("Options").font(.largeTitle).bold()
                    ForEach(1..<5, id:\.self) { counter in
                        Button {
                            selectedCounter = counter
                        } label: {
                            Text("Press Me \(counter)").font(.headline)
                        }
                        .buttonStyle(PlainButtonStyle())
                    }
                }
            }
            .listStyle(.grouped)
            .navigationDestination(item: $selectedCounter) { counter in
                SubView(counter: counter)
            }
        }
    }
}

以上方案均兼容Pull to Refresh特性，直接给List添加.refreshable修饰符即可正常使用。

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