在列表中的部分之间移动项目时,SwiftUI 奇怪的行为

Qua*_*ntm 10 swift swiftui

所以我一直在尝试制作一个组件swiftUI,它允许您List在部分之间移动项目。

我准备了一个包含两个部分的示例:“第一列表”和“第二列表”。每当您点击一个项目时,它就会交换部分。这是一个屏幕截图:

在此处输入图片说明

当我点击“第一个列表:1”时,它会正确移动到第二部分:

在此处输入图片说明

但是,它的名称现在应该更改为“第二个列表:1”,因为我命名这些部分中的元素的方式(请参阅下面的代码)。所以这很奇怪。但它变得奇怪:

当我现在点击第二部分中的“第一个列表:1”时,会发生这种情况:

在此处输入图片说明

它没有正确交换回来。它只是被复制了,但这次重复的名称实际上是正确的。

考虑到下面的代码,我不明白这是怎么可能的。似乎以swiftUI某种方式重用该项目,即使它重新呈现视图?它似乎也重用了.onTapGesture闭包,因为应该将项目放回第一部分的方法实际上从未被调用过。

知道这里发生了什么吗?以下是该问题的完整示例:

import SwiftUI
import Combine

struct TestView: View {
    @ObservedObject var viewModel: ViewModel

    class ViewModel: ObservableObject {
        let objectWillChange = PassthroughSubject<ViewModel,Never>()

        public enum List {
            case first
            case second
        }

        public var first: [Int] = []
        public var second: [Int] = []

        public func swap(elementWithIdentifier identifier: Int, from list: List) {
            switch list {
            case .first:
                self.first.removeAll(where: {$0 == identifier})
                self.second.append(identifier)
            case .second:
                print("Called")
                self.second.removeAll(where: {$0 == identifier})
                self.first.append(identifier)
            }

            self.objectWillChange.send(self)
        }

        init(first: [Int]) {
            self.first = first
        }
    }

    var body: some View {
        NavigationView {
            List {
                Section(header: Text("First List")) {
                    ForEach(self.viewModel.first, id: \.self) { id in
                        Text("First List: \(id)")
                            .frame(maxWidth: .infinity, maxHeight: .infinity)
                            .onTapGesture {
                                self.viewModel.swap(elementWithIdentifier: id, from: .first)
                        }
                    }
                }

                Section(header: Text("First List")) {
                    ForEach(self.viewModel.second, id: \.self) { id in
                        Text("Second List: \(id)")
                            .onTapGesture {
                                self.viewModel.swap(elementWithIdentifier: id, from: .second)
                        }
                    }
                }
            }
            .listStyle(GroupedListStyle())
            .navigationBarTitle(Text("Testing"))
        }.environment(\.editMode, .constant(EditMode.active))
    }
}

struct TestView_Preview: PreviewProvider {
    static var previews: some View {
        TestView(viewModel: TestView.ViewModel(first: [1, 2, 3, 4, 5]))
    }
}
Run Code Online (Sandbox Code Playgroud)

小智 0

我解决这个问题的唯一方法是通过向列表添加随机 id 来防止列表差异。但这会删除动画,因此寻找更好的解决方案

List {
...
}
.id(UUID())
Run Code Online (Sandbox Code Playgroud)

删除这些部分也可以解决此问题,但也不是有效的解决方案