ios - 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 秒的间隔将新的红色方块一一添加到网格中，但是有两个问题：

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

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

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

任何人都有提示如何调整它以正常工作？谢谢！

Answer 1

我可以重现你的问题，但我不知道为什么会这样。
但我找到了一个可能的解决方案。如果您将 in 包装起来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)
                }
            }
        }
    }
    
}