SwiftUI LazyVGrid 过渡动画不符合预期

Question

我有一个 LazyVGrid ，其定义如下：

let column = Array(repeating: GridItem(.flexible(minimum: 120, maximum: .infinity)), count: 3)
        
LazyVGrid(columns: column, alignment: .leading, spacing: 5) {
    ForEach(data, id: \.self.uniqueStableId) { _ in
        Color.red
             .transition(.move(edge: .trailing))
             .frame(height: 150)
    }
}

我有一个按钮，用于启动动画效果：

func handleButtonTap() {
    for index in 0..<9 {
        DispatchQueue.main.asyncAfter(deadline: .now() + Double(1 * index)) {
            withAnimation(.easeInOut(duration: 1)) {
                let newItem = Item()
                self.data.append(newItem)                                                                                     
            }
        }
    }
}

动画应使用幻灯片效果以 1 秒的间隔将新的红色方块一一添加到网格中，但有 2 个问题：

1. 即使我为红色视图设置了特定的过渡，该过渡也会被忽略，并且会添加带有淡入淡出效果的方块

2. 每次将行中的第一个方块添加到网格上的新行中，它从行的中间出现，并开始垂直滑动，同一行中的下一个方块在

中淡入淡出<图片src="https://i.sstatic.net/AW7Tg.png" alt="image2">

看来我在错误的位置设置了过渡和动画，因为即使从中删除 .transition红色视图，它仍然以相同的方式进行动画处理。无法理解是什么控制它

有人知道如何调整它以使其正常工作吗？ 谢谢！

Answer 1

我可以重现您的问题，但我不知道为什么会发生。
但我找到了一个可能的解决方案。如果将 LazyVGrid 包装在 ScrollView 中，它就可以工作：

struct Item: Identifiable {
    let id = UUID()
}

struct ContentView: View {
    
    @State private var data: [Item] = []
    let column = Array(repeating: GridItem(.flexible()), count: 3)
    
    var body: some View {
        VStack {
            Button("Add") { handleButtonTap() }
            
            ScrollView {
            LazyVGrid(columns: column, alignment: .leading, spacing: 5) {
                ForEach(data) { _ in
                    Color.red
                        .frame(height: 150)
                        .transition(.move(edge: .trailing))
                }
            }
            Spacer()
            }
        }
    }
    
    func handleButtonTap() {
        for index in 0..<9 {
            DispatchQueue.main.asyncAfter(deadline: .now() + Double(1 * index)) {
                withAnimation(.easeInOut(duration: 1)) {
                    let newItem = Item()
                    self.data.append(newItem)
                }
            }
        }
    }
    
}