如何动画移除使用 ForEach 循环创建的视图从 SwiftUI 中的 ObservableObject 获取其数据

如何解决如何动画移除使用 ForEach 循环创建的视图从 SwiftUI 中的 ObservableObject 获取其数据

该应用具有以下设置：

我的主视图使用 SwiftUI ForEach 循环创建标签云。 ForEach 从名为 @Published 的 ObservableObject 的 TagModel 数组中获取数据。使用 Timer，ObservableObject 每三秒向数组添加一个新标签。通过添加标签，ForEach 会再次触发并创建另一个 TagView。一旦超过三个标签被添加到数组中，ObservableObject 就会从数组中删除第一个（最旧的）标签，而 ForEach 会删除那个特定的 TagView。

遇到以下问题：

TagViews 的创建工作完美。它还使用 TagView 的动画和 .onAppear 修饰符以应有的方式制作动画。然而，当最旧的标签被移除时，它不会对其移除进行动画处理。 .ondisappear 中的代码会执行，但 TagView 会立即删除。

我尝试了以下方法来解决问题：

我尝试通过使用重复然后自动反转的动画来让 TagView 的整个出现和消失动画在 .onAppear 内运行。它有点工作，但这样有两个问题。首先，如果动画的时间太短，一旦动画完成并且 TagView 被移除，将在没有应用任何修改器的情况下显示一小段时间，然后将其移除。其次，如果我将动画持续时间设置得更长，TagView 将在动画完成之前被移除。为了让它起作用，我需要非常精确地确定动画的移除和持续时间，这会使 TagView 非常依赖于 Timer 而这似乎不是很好的解决方案。

我尝试的另一个解决方案是使用 self.presentationMode.wrappedValue.dismiss() 变量找到类似于 @Environment(\.presentationMode) 的内容，并在 TagView 动画完成后以某种方式让 .onAppear 自行删除。但这仅适用于在导航堆栈中创建视图并且我找不到任何其他方法来让视图自行销毁的情况。此外，我认为一旦 TagModel 更新其数组，这会再次引起问题。

我阅读了其他几篇 S.O.指向 ForEach 循环中数据枚举的解决方案。但是我将每个 TagView 创建为它自己的对象，我认为这不应该是问题，如果这是问题的一部分，我不确定我将如何实现它。

这是我的应用程序的简化代码，可以在 iOS 单视图 SwiftUI 项目中运行。

import SwiftUI

struct ContentView: View {
    private let timer = Timer.publish(every: 3,on: .main,in: .common).autoconnect()
    @Observedobject var tagModel = TagModel()
    
    var body: some View {
        ZStack {
            ForEach(tagModel.tags,id: \.self) { label in
                TagView(label: label)
            }
            .onReceive(timer) { _ in
                self.tagModel.addNextTag()
                if tagModel.tags.count > 3 {
                    self.tagModel.removeOldestTag()
                }
            }
        }
    }
}

class TagModel: ObservableObject {
    @Published var tags = [String]()
    
    func addNextTag() {
        tags.append(String( Date().timeIntervalSince1970 ))
    }
    func removeOldestTag() {
        tags.remove(at: 0)
    }
}

struct TagView: View {
    @State private var show: Bool = false
    @State private var position: CGPoint = CGPoint(x: Int.random(in: 50..<250),y: Int.random(in: 10..<25))
    @State private var offsetY: CGFloat = .zero
    
    let label: String
    
    var body: some View {
        let text = Text(label)
            .opacity(show ? 1.0 : 0.0)
            .scaleEffect(show ? 1.0 : 0.0)
            .animation(Animation.easeInOut(duration: 6))
            .position(position)
            .offset(y: offsetY)
            .animation(Animation.easeInOut(duration: 6))
            .onAppear() {
                show = true
                offsetY = 100
            }
            .ondisappear() {
                show = false
                offsetY = 0
            }
        return text
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

解决方法

目前尚不清楚您尝试实现哪种效果，但是在移除时您应该动画化而不是查看内部结构，而是查看自身，即。在父级中，因为视图从那里移除并且作为一个整体。

类似的东西（只是实验的方向）：

var body: some View {
    ZStack {
        ForEach(tagModel.tags,id: \.self) { label in
            TagView(label: label)
                .transition(.move(edge: .leading))    // << here !! (maybe asymmetric needed)
        }
        .onReceive(timer) { _ in
            self.tagModel.addNextTag()
            if tagModel.tags.count > 3 {
                self.tagModel.removeOldestTag()
            }
        }
    }
    .animation(Animation.easeInOut(duration: 1))    // << here !! (parent animates subview removing)