SwiftUI对另一个视图中的动态部分进行重新排序

时间:2020-07-20 13:34:11

标签: swift swiftui swiftui-list

我有一个简单的List,其中的部分存储在ObservableObject内。我想从另一个视图重新排序。

这是我的代码:

class ViewModel: ObservableObject {
    @Published var sections = ["S1", "S2", "S3", "S4"]
    
    func move(from source: IndexSet, to destination: Int) {
        sections.move(fromOffsets: source, toOffset: destination)
    }
}
struct ContentView: View {
    @ObservedObject var viewModel = ViewModel()
    @State var showOrderingView = false

    var body: some View {
        VStack {
            Button("Reorder sections") {
                self.showOrderingView = true
            }
            list
        }
        .sheet(isPresented: $showOrderingView) {
            OrderingView(viewModel: self.viewModel)
        }
    }

    var list: some View {
        List {
            ForEach(viewModel.sections, id: \.self) { section in
                Section(header: Text(section)) {
                    ForEach(0 ..< 3, id: \.self) { _ in
                        Text("Item")
                    }
                }
            }
        }
    }
}
struct OrderingView: View {
    @ObservedObject var viewModel: ViewModel

    var body: some View {
        NavigationView {
            List {
                ForEach(viewModel.sections, id: \.self) { section in
                    Text(section)
                }
                .onMove(perform: viewModel.move)
            }
            .navigationBarItems(trailing: EditButton())
        }
    }
}

但是在OrderingView中,当尝试移动节时,出现此错误:“试图为单元格创建两个动画” 。可能是因为各节的顺序已更改。

如何更改各节的顺序?

2 个答案:

答案 0 :(得分:2)

这种情况下的问题是重新创建多次ViewModel,所以在片材进行的修饰刚刚失去。 (奇怪的是,在带有StateObject的SwiftUI 2.0中,这些更改也丢失了,EditButton根本不起作用。)

无论如何。看起来这是找到的解决方法。这个想法是要打破访谈的依赖(绑定),并使用纯数据将它们显式传递到工作表中,然后从中显式返回它们。

经过测试并与Xcode 12 / iOS 14配合使用,但我试图避免使用SwiftUI 2.0功能。

class ViewModel: ObservableObject {
    @Published var sections = ["S1", "S2", "S3", "S4"]

    func move(from source: IndexSet, to destination: Int) {
        sections.move(fromOffsets: source, toOffset: destination)
    }
}

struct ContentView: View {
    @ObservedObject var viewModel = ViewModel()
    @State var showOrderingView = false

    var body: some View {
        VStack {
            Button("Reorder sections") {
                self.showOrderingView = true
            }

            list
        }
        .sheet(isPresented: $showOrderingView) {
            OrderingView(sections: viewModel.sections) {
                self.viewModel.sections = $0
            }
        }
    }

    var list: some View {
        List {
            ForEach(viewModel.sections, id: \.self) { section in
                Section(header: Text(section)) {
                    ForEach(0 ..< 3, id: \.self) { _ in
                        Text("Item")
                    }
                }
            }
        }
    }
}

struct OrderingView: View {
    @State private var sections: [String]
    let callback: ([String]) -> ()

    init(sections: [String], callback: @escaping ([String]) -> ())
    {
        self._sections = State(initialValue: sections)
        self.callback = callback
    }

    var body: some View {
        NavigationView {
            List {
                ForEach(sections, id: \.self) { section in
                    Text(section)
                }
                .onMove {
                    self.sections.move(fromOffsets: $0, toOffset: $1)
                }
            }
            .navigationBarItems(trailing: EditButton())
        }
        .onDisappear {
            self.callback(self.sections)
        }
    }
}

答案 1 :(得分:0)

SwiftUI 1.0的可能解决方法

我发现了一种解决方法,可以通过添加List来禁用.id(UUID())的动画:

var list: some View {
    List {
        ...
    }
    .id(UUID())
}

但是,这会使使用NavigationLink(destination:tag:selection:)Transition animation gone when presenting a NavigationLink in SwiftUI创建的NavigationLink的过渡动画混乱。

所有其他动画(例如onDelete)也都丢失了。

更hacky的解决方案是有条件地禁用列表动画:

class ViewModel: ObservableObject {
    ...
    @Published var isReorderingSections = false
    ...
}
struct OrderingView: View {
    @ObservedObject var viewModel: ViewModel

    var body: some View {
        NavigationView {
            ...
        }
        .onAppear {
            self.viewModel.isReorderingSections = true
        }
        .onDisappear {
            self.viewModel.isReorderingSections = false
        }
    }
}
struct ContentView: View {
    ...
    var list: some View {
        List {
            ...
        }
        .id(viewModel.isReorderingSections ? UUID().hashValue : 1)
    }
}