SwiftUI中屏幕外的NavigationLink无法通过代码触发问题

你的推测没错，List的懒加载特性会导致不在可视区域内的NavigationLink实例未被创建，因此绑定的selection变量变化时无法触发页面跳转。针对条目极少的场景，有两种简单的解决思路：

方案一：用ScrollView+VStack替代List（完全取消懒加载） #

直接抛弃List的懒加载特性，用ScrollView和VStack手动模拟List的样式，这样所有条目会一次性渲染完成，NavigationLink随时可以响应selection的变化。

修改后的代码如下：

import SwiftUI

struct ContentView: View {
    
    var items : [Item] = [Item(id: 1, name: "item1"), Item(id: 2, name: "item2"), Item(id: 3, name: "item3")]
    
    @State var selectedItem: Item?
    
    var body: some View {
        NavigationView{
            VStack{
                Button {
                    selectedItem = items[0]
                } label: {
                    Text("Select Item")
                }
                
                ScrollView {
                    VStack(spacing: 0) {
                        // 模拟原List的第一个Section
                        VStack{
                            Text("TEST")
                            Spacer().frame(height: 800)
                            Text("TEST")
                        }
                        .padding()
                        .background(Color(.systemBackground))
                        
                        Divider()
                        
                        // 模拟原List的第二个Section
                        VStack(alignment: .leading, spacing: 0) {
                            Text("Section")
                                .font(.headline)
                                .padding(.horizontal)
                                .padding(.vertical, 8)
                                .background(Color(.systemGroupedBackground))
                            
                            ForEach(items) { item in
                                NavigationLink(
                                    destination: DestView(item: item),
                                    tag: item,
                                    selection: $selectedItem
                                ) {
                                    VStack(alignment: .leading){
                                        Text(item.name).font(.headline)
                                    }
                                    .padding()
                                }
                                Divider()
                            }
                        }
                    }
                }
                .background(Color(.systemGroupedBackground))
            }
        }
    }
}

struct DestView: View {
    
    var item: Item
    var body: some View {
        Text(item.name)
    }
}

struct Item : Identifiable, Hashable {
    var id : Int
    var name : String
}

这个方案完全规避了懒加载问题，适合条目数量极少的场景，没有性能负担。

方案二：保留List，通过ScrollViewReader预加载目标行 #

如果你想保留List的原生样式和交互，可以用ScrollViewReader强制滚动到目标条目，确保对应的NavigationLink被加载，从而触发跳转。

修改后的核心代码如下：

struct ContentView: View {
    
    var items : [Item] = [Item(id: 1, name: "item1"), Item(id: 2, name: "item2"), Item(id: 3, name: "item3")]
    
    @State var selectedItem: Item?
    @State private var scrollProxy: ScrollViewProxy?
    
    var body: some View {
        NavigationView{
            VStack{
                Button {
                    selectedItem = items[0]
                } label: {
                    Text("Select Item")
                }
                
                ScrollViewReader { proxy in
                    List{
                        Section{
                            VStack{
                                Text("TEST")
                                Spacer().frame(height: 800)
                                Text("TEST")
                            }
                        }
                        
                        Section("Section") {
                            ForEach(items) { item in
                                NavigationLink(
                                    destination: DestView(item: item),
                                    tag: item,
                                    selection: $selectedItem
                                ) {
                                    VStack(alignment: .leading){
                                        Text(item.name).font(.headline)
                                    }
                                }
                                .id(item.id) // 给每个行添加唯一标识
                            }
                        }
                    }
                    .onAppear {
                        scrollProxy = proxy
                    }
                    .onChange(of: selectedItem) { newValue in
                        guard let item = newValue else { return }
                        // 滚动到目标行，触发视图加载
                        scrollProxy?.scrollTo(item.id, anchor: .top)
                    }
                }
            }
        }
    }
}

当selectedItem变化时，通过scrollTo将目标行滚动到可视区域，List会加载该行对应的NavigationLink，进而触发页面跳转。

针对你的业务场景推荐 #

由于你的列表条目极少，方案一更直接高效，无需处理滚动逻辑，就能确保新添加的条目对应的NavigationLink在页面加载时就已存在，返回列表页后可直接触发跳转至详情页。

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