NavigationLink详情页转场动画仅首次生效问题求助

问题描述 #

使用NavigationLink跳转至详情页时，转场动画仅在首次跳转时生效，后续跳转无动画效果。

临时解决方案是将LazyVStack替换为VStack，但该方案会失去懒加载的优势，并非理想选择。

核心原因 #

LazyVStack的视图复用机制导致NavigationLink被复用，SwiftUI不会为复用的链接重新触发转场动画逻辑。

有效解决方案 #

方案1：为每个NavigationLink添加独立ID

通过给每个NavigationLink设置唯一的id，强制SwiftUI为每个链接创建独立的视图实例，避免复用：

struct TestView: View {
    var body: some View {
        NavigationView {
            ScrollView {
                LazyVStack(alignment: .leading, spacing: 0) {
                    ForEach([1,2,3,4,5,6], id: \.self) { rowId in
                        NavigationLink {
                            Text("Got here!")
                        } label: {
                            Text("Row \(rowId)")
                                .padding()
                        }
                        .id(rowId) // 绑定唯一ID，避免视图复用
                    }
                }
            }
        }
    }
}

方案2：使用Selection+Tag模式

通过NavigationLink的selection和tag绑定状态，手动控制跳转触发，确保每次跳转都触发全新的转场：

struct TestView: View {
    @State private var selectedRow: Int? = nil
    
    var body: some View {
        NavigationView {
            ScrollView {
                LazyVStack(alignment: .leading, spacing: 0) {
                    ForEach([1,2,3,4,5,6], id: \.self) { rowId in
                        Button(action: {
                            selectedRow = rowId
                        }) {
                            Text("Row \(rowId)")
                                .padding()
                        }
                    }
                }
                // 隐藏的NavigationLink，通过selection控制跳转
                .background(
                    NavigationLink(
                        destination: Text("Got here!"),
                        tag: nil,
                        selection: $selectedRow
                    ) {
                        EmptyView()
                    }
                )
            }
        }
    }
}

方案3：绑定独立的isActive状态

给每个NavigationLink绑定独立的isActive状态变量，手动控制跳转：

struct TestView: View {
    // 为每个行创建独立的状态变量
    @State private var linkStates = Array(repeating: false, count: 6)
    
    var body: some View {
        NavigationView {
            ScrollView {
                LazyVStack(alignment: .leading, spacing: 0) {
                    ForEach(0..<6) { index in
                        NavigationLink(
                            destination: Text("Got here!"),
                            isActive: $linkStates[index]
                        ) {
                            Text("Row \(index + 1)")
                                .padding()
                        }
                    }
                }
            }
        }
    }
}

说明 #

以上方案均能保留LazyVStack的懒加载优势，同时确保每次跳转都触发正常的转场动画。优先推荐方案1或方案2，代码更简洁易维护。

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