带动画的LazyVStack导致菜单消失问题及解决方案咨询

问题复现场景 #

当LazyVStack中的菜单项触发操作带动画隐藏条目，后续通过数据变更重新显示该条目时，菜单无法正常展示。仅同时满足以下两个条件时触发：

• 视图通过LazyVStack渲染
• 条目可见性变更伴随动画效果

核心原因 #

SwiftUI的LazyVStack会复用视图容器，当条目状态变更（archived切换）后，原视图的Menu组件状态没有被正确重置，导致重新显示时菜单无法正常渲染。

解决方案 #

通过给ItemView绑定包含状态信息的唯一标识，强制SwiftUI在条目状态变更时重新创建视图实例，而非复用旧容器。同时优化数据更新逻辑，确保动画作用范围合理。

修改后的完整代码

import SwiftUI

struct Item: Equatable, Identifiable {
    let id: String
    var archived = false
}

struct ItemView: View {
    let item: Item
    let onChange: () -> Void
    
    var body: some View {
        HStack {
            Text("item \(item.id)")
            Menu {
                Button {
                    onChange()
                } label: {
                    Text("Switch")
                }
            } label: {
                Text("menu")
            }
        }
        .id("\(item.id)-\(item.archived)") // 绑定包含状态的唯一视图ID
    }
}

class GroupOfItem: ObservableObject {
    @Published var items: [Item] = [
        Item(id: "a"),
        Item(id: "b")
    ]
}

struct ContentView: View {
    @State private var toggle = false
    @StateObject private var groupOfItem = GroupOfItem()
    
    var body: some View {
        Toggle(isOn: $toggle) {
            Text("toggle")
        }
        ScrollView {
            LazyVStack {
                ForEach(groupOfItem.items.filter { $0.archived == toggle }) { item in
                    ItemView(item: item) {
                        withAnimation {
                            if let index = groupOfItem.items.firstIndex(where: { $0.id == item.id }) {
                                groupOfItem.items[index].archived.toggle()
                            }
                        }
                    }
                }
            }
        }
    }
}

关键改动说明

1. 让Item实现Identifiable：简化ForEach的使用逻辑，避免手动指定id参数，提升条目识别的准确性。
2. 给ItemView添加状态关联的id：用"\(item.id)-\(item.archived)"作为视图唯一标识，当条目归档状态变更时，SwiftUI会销毁旧视图并创建新实例，确保Menu组件状态被完全重置。
3. 优化数据更新逻辑：用firstIndex(where:)替代依赖全属性对比的firstIndex(of:)，提升查找效率的同时避免Equatable协议带来的潜在问题。

其他可选方案 #

如果上述方案仍存在异常，可尝试以下补充手段：

• 手动控制Menu显示状态：给ItemView添加@State private var isMenuPresented = false，绑定到Menu的isPresented参数，并在视图onAppear时重置该状态。
• 指定具体动画类型：使用withAnimation(.easeInOut(duration: 0.3))明确动画参数，避免默认动画对视图复用逻辑的干扰。

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