与 SwiftUI 和 Combine 的双向绑定

Question

我正在尝试找出如何在父子关系中的两个 ViewModel 之间正确传递一个对象或一组值，以便在更新子 ViewModel 时，更改会冒泡回到父级。

当仅使用 SwiftUI 视图并直接绑定到商店时，这非常简单，但我想将字段验证等业务逻辑与 SwiftUI 视图分开。

下面的代码显示了当父项更新时子项更新（如预期的那样），但我需要以某种方式将子项中更改的值传回给父项。我对移动应用程序开发还很陌生，并且还在学习，所以我确定我遗漏了一些非常简单的东西。

import SwiftUI
import Combine

struct Person: Hashable {
  var givenName: String
  var familyName: String
}

// my person store - in the real app it's backed by coredata
class PersonStore: ObservableObject {
  @Published var people: [Person] = [
    Person(
      givenName: "Test",
      familyName: "Person"
    )
  ]
  static let shared = PersonStore()
}

// app entrypoint
struct PersonView: View {
  @ObservedObject var viewModel: PersonView_ViewModel = PersonView_ViewModel()

  var body: some View {
    NavigationView {
      VStack {
        List(viewModel.people.indices, id: \.self) { idx in
          NavigationLink(destination: PersonDetailView(viewModel: PersonDetailView_ViewModel(personIndex: idx))) {
            Text(self.viewModel.people[idx].givenName)
          }
        }
      }
    }
  }
}

class PersonView_ViewModel: ObservableObject {
  @Published var people: [Person] = PersonStore.shared.people
}

// this is the detail view
struct PersonDetailView: View {
  @ObservedObject var viewModel: PersonDetailView_ViewModel

  var body: some View {
    Form {
      Section(header: Text("Parent View")) {
        VStack {
          TextField("Given Name", text: self.$viewModel.person.givenName)
          Divider()
          TextField("Family Name", text: self.$viewModel.person.familyName)
        }
      }
      PersonBasicDetails(viewModel: PersonBasicDetails_ViewModel(person: viewModel.person))
    }
  }
}

// viewmodel associated with detail view
class PersonDetailView_ViewModel: ObservableObject {
  @Published var person: Person

  init(personIndex: Int) {
    self.person = PersonStore.shared.people[personIndex]
  }
}

// this is the child view - in the real app there are multiple sections which are conditionally rendered
struct PersonBasicDetails: View {
  @ObservedObject var viewModel: PersonBasicDetails_ViewModel

  var body: some View {
    Section(header: Text("Child View")) {
      VStack {
        TextField("Given Name", text: self.$viewModel.person.givenName)
        Divider()
        TextField("Family Name", text: self.$viewModel.person.familyName)
      }
    }
  }
}

class PersonBasicDetails_ViewModel: ObservableObject {
  @Published var person: Person

  init(person: Person) {
    self.person = person
  }
}

struct PersonView_Previews: PreviewProvider {
  static var previews: some View {
    PersonView()
  }
}

Answer 1

在网络上的大多数 SwiftUI TextField 示例中，绑定是通过使用 @State 变量提供的，该变量会为您创建 Binding 的实例。

但是，您也可以使用 Binding 构造函数创建自定义绑定。这是一个看起来像的例子：

TextField(
  "Given Name",
  text: Binding(
    get: { self.$viewModel.person.givenName },
    set: { self.$viewModel.person.givenName = [=10=] }))

Answer 2

如果你想要两种方式的作品，不仅需要发布，还必须使用绑定向上。

struct Person: Hashable {
    var givenName: String
    var familyName: String
}

// my person store - in the real app it's backed by coredata
class PersonStore: ObservableObject {
    @Published var people: [Person] = [
        Person(givenName: "Test",familyName: "Person")
    ]

    static let shared = PersonStore()
}

// app entrypoint
struct PersonView: View {
    @ObservedObject var viewModel: PersonView_ViewModel = PersonView_ViewModel()

    var body: some View {
        NavigationView {
            VStack {
                List(viewModel.people.indices, id: \.self) { idx in
                    NavigationLink(destination: PersonDetailView(viewModel: PersonDetailView_ViewModel(person: self.$viewModel.people , index: idx ))) {
                        Text(self.viewModel.people[idx].givenName)
                    }
                }
            }
        }
    }
}

class PersonView_ViewModel: ObservableObject {
    @Published var people: [Person] = PersonStore.shared.people
}

// this is the detail view
struct PersonDetailView: View {
    @ObservedObject var viewModel: PersonDetailView_ViewModel

    var body: some View {
        Form {
            Section(header: Text("Parent View")) {
                VStack {
                    TextField("Given Name", text: self.viewModel.person.givenName)
                    Divider()
                    TextField("Family Name", text: self.viewModel.person.familyName)
                }
            }
             PersonBasicDetails(viewModel: PersonBasicDetails_ViewModel(person: viewModel.person))
        }
    }
}

// viewmodel associated with detail view
class PersonDetailView_ViewModel: ObservableObject {
    @Published var person: Binding<Person>

    init(person: Binding<[Person]> ,index: Int) {
        self.person = person[index]
    }
}

// this is the child view - in the real app there are multiple sections which are conditionally rendered
struct PersonBasicDetails: View {
    @ObservedObject var viewModel: PersonBasicDetails_ViewModel

    var body: some View {
        Section(header: Text("Child View")) {
            VStack {
                TextField("Given Name", text: self.viewModel.person.givenName)
                Divider()
                TextField("Family Name", text: self.viewModel.person.familyName)
            }
        }
    }
}

class PersonBasicDetails_ViewModel: ObservableObject {
    @Published var person: Binding<Person>

    init(person: Binding<Person>) {
        self.person = person //person
    }
}

struct PersonView_Previews: PreviewProvider {
    static var previews: some View {
        PersonView()
    }
}

与 SwiftUI 和 Combine 的双向绑定

Bidirectional binding with SwiftUI and Combine

swiftui

combine