如何从observableObject更新SwiftUI navigationlink视图？

huangapple
go评论99阅读模式
英文:

How to update a SwiftUI navigationlink view from an observableObject?

问题

考虑到这个MRE：

  1. struct ContentView: View {
  2.     @StateObject var vm = VM()
  3.     var body: some View {
  4.         NavigationStack {
  5.             VStack {
  6.                 ForEach(vm.list, id: \.self) { int in
  7.                     NavigationLink {
  8.                         DetailView(vm: vm, x: int)
  9.                     } label: {
  10.                         Text("\(int)")
  11.                     }
  12.                 }
  13.                 Button {
  14.                     vm.changeFirstElement()
  15.                 } label: {
  16.                     Text("change")
  17.                 }
  18.             }
  19.         }
  20.     }
  21. }
  23. struct DetailView: View {
  24.     @ObservedObject var vm: VM
  25.     let x: Int
  26.     var body: some View {
  27.         VStack {
  28.             Text("\(x)")
  29.             Button {
  30.                 vm.changeFor(index:x) //how to make this work?
  31.             } label: {
  32.                 Text("change")
  33.             }
  34.         }
  35.     }
  36. }
  38. class VM: ObservableObject {
  39.     @Published var list = [1, 2, 3, 4]
  40.     func changeFirstElement() {
  41.         list[0] = 5
  42.     }
  43. }

你可以看到在主视图中，changeFirstElement() 能够正常工作，视图会重新绘制。

但在详细视图内部，尽管它具有@ObservedObject，但它并不会。我应该如何使数据模型的更改反映在详细视图内部？

英文:

Consider this MRE

  1. struct ContentView: View {
  2.     @StateObject var vm = VM()
  3.     var body: some View {
  4.         NavigationStack {
  5.             VStack {
  6.                 ForEach(vm.list, id: \.self) { int in
  7.                     NavigationLink {
  8.                         DetailView(vm: vm, x: int)
  9.                     } label: {
  10.                         Text("\(int)")
  11.                     }
  12.                 }
  13.                 Button {
  14.                     vm.changeFirstElement()
  15.                 } label: {
  16.                     Text("change")
  17.                 }
  18.             }
  19.         }
  20.     }
  21. }
  23. struct DetailView: View {
  24.     @ObservedObject var vm: VM
  25.     let x: Int
  26.     var body: some View {
  27.         VStack {
  28.             Text("\(x)")
  29.             Button {
  30.                 vm.changeFor(index:x) //how to make this work?
  31.             } label: {
  32.                 Text("change")
  33.             }
  34.         }
  35.     }
  36. }
  38. class VM: ObservableObject {
  39.     @Published var list = [1, 2, 3, 4]
  40.     func changeFirstElement() {
  41.         list[0] = 5
  42.     }
  43. }

You can see that in the main view, change() works, the view redraws

But inside the detail view, even though it has observed object it doesn't. How can I make it so that changes in the data model is reflected even inside the Detail View?

答案1

得分: 1

在SwiftUI中，有许多情况（比如ForEach和List）需要使用Identifiable数据。实际上，如果你使用id: self，通常意味着出现了一些问题。

通过使用一个Identifiable模型，一切都会“自然而然地运行”：

  1. struct Item: Identifiable {
  2.     var id = UUID()
  3.     var value: Int
  4. }
  6. struct ContentView: View {
  7.     @StateObject var vm = VM()
  8.     var body: some View {
  9.         NavigationStack {
  10.             VStack {
  11.                 ForEach(vm.list) { item in
  12.                     NavigationLink {
  13.                         DetailView(vm: vm, item: item)
  14.                     } label: {
  15.                         Text("\(item.value)")
  16.                     }
  17.                 }
  18.                 Button {
  19.                     vm.change()
  20.                 } label: {
  21.                     Text("change")
  22.                 }
  23.             }
  24.         }
  25.     }
  26. }
  28. struct DetailView: View {
  29.     @ObservedObject var vm: VM
  30.     let item: Item
  31.     var body: some View {
  32.         VStack {
  33.             Text("\(item.value)")
  34.             Button {
  35.                 vm.change()
  36.             } label: {
  37.                 Text("change")
  38.             }
  39.         }
  40.     }
  41. }
  43. class VM: ObservableObject {
  44.     @Published var list: [Item] = [.init(value: 1), .init(value: 2), .init(value: 3)]
  45.     func change() {
  46.         list[0].value = 5
  47.     }
  48. }

请注意，是否真的需要在这里使用VM也是值得讨论的，你可以直接从ForEach中使用Binding。以下是一个在ForEach中使用Binding的版本：

  1. struct Item: Identifiable {
  2.     var id = UUID()
  3.     var value: Int
  4. }
  6. struct ContentView: View {
  7.     @StateObject var vm = VM()
  8.     var body: some View {
  9.         NavigationStack {
  10.             VStack {
  11.                 ForEach($vm.list) { $item in
  12.                     NavigationLink {
  13.                         DetailView(item: $item)
  14.                     } label: {
  15.                         Text("\(item.value)")
  16.                     }
  17.                 }
  18.                 Button {
  19.                     vm.list[0].value = 5
  20.                 } label: {
  21.                     Text("change")
  22.                 }
  23.             }
  24.         }
  25.     }
  26. }
  28. struct DetailView: View {
  29.     @Binding var item: Item
  30.     var body: some View {
  31.         VStack {
  32.             Text("\(item.value)")
  33.             Button {
  34.                 item.value = 5
  35.             } label: {
  36.                 Text("change")
  37.             }
  38.         }
  39.     }
  40. }
  42. class VM: ObservableObject {
  43.     @Published var list: [Item] = [.init(value: 1), .init(value: 2), .init(value: 3)]
  44. }

如果出于某种原因你真的需要使用索引，你可以这样做：

  1. struct Item: Identifiable {
  2.     var id = UUID()
  3.     var value: Int
  4. }
  6. struct ContentView: View {
  7.     @StateObject var vm = VM()
  8.     var body: some View {
  9.         NavigationStack {
  10.             VStack {
  11.                 ForEach(Array(vm.list.enumerated()), id: \.element.id) { (index, item) in
  12.                     NavigationLink {
  13.                         DetailView(vm: vm, item: item, index: index)
  14.                     } label: {
  15.                         Text("\(item.value)")
  16.                     }
  17.                 }
  18.                 Button {
  19.                     vm.changeFirstElement()
  20.                 } label: {
  21.                     Text("change")
  22.                 }
  23.             }
  24.         }
  25.     }
  26. }
  28. struct DetailView: View {
  29.     @ObservedObject var vm: VM
  30.     let item: Item
  31.     let index: Int
  32.     
  33.     var body: some View {
  34.         VStack {
  35.             Text("\(item.value)")
  36.             Button {
  37.                 vm.changeAtIndex(index)
  38.             } label: {
  39.                 Text("change")
  40.             }
  41.         }
  42.     }
  43. }
  45. class VM: ObservableObject {
  46.     @Published var list: [Item] = [.init(value: 1), .init(value: 2), .init(value: 3)]
  47.     func changeFirstElement() {
  48.         list[0].value = 5
  49.     }
  50.     
  51.     func changeAtIndex(_ index: Int) {
  52.         list[index].value = 5
  53.     }
  54. }
英文:

In SwiftUI, there are many cases (like ForEach and List) where it's useful to have Identifiable data. In fact, if you're using id: self, it's usually a sign of something going wrong.

By using an Identifiable model, everything "just works":

  2. struct Item: Identifiable {
  3.     var id = UUID()
  4.     var value: Int
  5. }
  7. struct ContentView: View {
  8.     @StateObject var vm = VM()
  9.     var body: some View {
  10.         NavigationStack {
  11.             VStack {
  12.                 ForEach(vm.list) { item in
  13.                     NavigationLink {
  14.                         DetailView(vm: vm, item: item)
  15.                     } label: {
  16.                         Text("\(item.value)")
  17.                     }
  18.                 }
  19.                 Button {
  20.                     vm.change()
  21.                 } label: {
  22.                     Text("change")
  23.                 }
  24.             }
  25.         }
  26.     }
  27. }
  29. struct DetailView: View {
  30.     @ObservedObject var vm: VM
  31.     let item: Item
  32.     var body: some View {
  33.         VStack {
  34.             Text("\(item.value)")
  35.             Button {
  36.                 vm.change()
  37.             } label: {
  38.                 Text("change")
  39.             }
  40.         }
  41.     }
  42. }
  44. class VM: ObservableObject {
  45.     @Published var list: [Item] = [.init(value: 1), .init(value: 2), .init(value: 3)]
  46.     func change() {
  47.         list[0].value = 5
  48.     }
  49. }

Note that it's also debatable whether you would need the VM at all here -- you could just use a Binding from the ForEach. Here's a version using a Binding on the ForEach:

  1. struct Item: Identifiable {
  2.     var id = UUID()
  3.     var value: Int
  4. }
  6. struct ContentView: View {
  7.     @StateObject var vm = VM()
  8.     var body: some View {
  9.         NavigationStack {
  10.             VStack {
  11.                 ForEach($vm.list) { $item in
  12.                     NavigationLink {
  13.                         DetailView(item: $item)
  14.                     } label: {
  15.                         Text("\(item.value)")
  16.                     }
  17.                 }
  18.                 Button {
  19.                     vm.list[0].value = 5
  20.                 } label: {
  21.                     Text("change")
  22.                 }
  23.             }
  24.         }
  25.     }
  26. }
  28. struct DetailView: View {
  29.     @Binding var item: Item
  30.     var body: some View {
  31.         VStack {
  32.             Text("\(item.value)")
  33.             Button {
  34.                 item.value = 5
  35.             } label: {
  36.                 Text("change")
  37.             }
  38.         }
  39.     }
  40. }
  42. class VM: ObservableObject {
  43.     @Published var list: [Item] = [.init(value: 1), .init(value: 2), .init(value: 3)]
  44. }

And, if for some reason you truly need to use indices, you can do this:

  1. struct Item: Identifiable {
  2.     var id = UUID()
  3.     var value: Int
  4. }
  6. struct ContentView: View {
  7.     @StateObject var vm = VM()
  8.     var body: some View {
  9.         NavigationStack {
  10.             VStack {
  11.                 ForEach(Array(vm.list.enumerated()), id: \.element.id) { (index, item) in
  12.                     NavigationLink {
  13.                         DetailView(vm: vm, item: item, index: index)
  14.                     } label: {
  15.                         Text("\(item.value)")
  16.                     }
  17.                 }
  18.                 Button {
  19.                     vm.changeFirstElement()
  20.                 } label: {
  21.                     Text("change")
  22.                 }
  23.             }
  24.         }
  25.     }
  26. }
  28. struct DetailView: View {
  29.     @ObservedObject var vm: VM
  30.     let item: Item
  31.     let index: Int
  32.     
  33.     var body: some View {
  34.         VStack {
  35.             Text("\(item.value)")
  36.             Button {
  37.                 vm.changeAtIndex(index)
  38.             } label: {
  39.                 Text("change")
  40.             }
  41.         }
  42.     }
  43. }
  45. class VM: ObservableObject {
  46.     @Published var list: [Item] = [.init(value: 1), .init(value: 2), .init(value: 3)]
  47.     func changeFirstElement() {
  48.         list[0].value = 5
  49.     }
  50.     
  51.     func changeAtIndex(_ index: Int) {
  52.         list[index].value = 5
  53.     }
  54. }

huangapple
  • 本文由 发表于 2023年7月13日 21:39:44
  • 转载请务必保留本文链接：https://go.coder-hub.com/76680044.html
  • swift
  • swiftui
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定