ios - 将 SwiftUI 按钮绑定到 AnySubscriber,例如 RxCocoa 的按钮点击
问题描述
我使用以下基于代码UIViewController
的RxSwift/RxCocoa
代码来编写一个非常简单的 MVVM 模式来绑定一个UIButton
点击事件来触发一些Observable
工作并监听结果:
import UIKit
import RxSwift
import RxCocoa
class ViewController: UIViewController {
@IBOutlet weak var someButton: UIButton!
var viewModel: ViewModel!
private var disposeBag = DisposeBag()
override func viewDidLoad() {
super.viewDidLoad()
viewModel = ViewModel()
setupBindings()
}
private func setupBindings() {
someButton.rx.tap
.bind(to: self.viewModel.input.trigger)
.disposed(by: disposeBag)
viewModel.output.result
.subscribe(onNext: { element in
print("element is \(element)")
}).disposed(by: disposeBag)
}
}
class ViewModel {
struct Input {
let trigger: AnyObserver<Void>
}
struct Output {
let result: Observable<String>
}
let input: Input
let output: Output
private let triggerSubject = PublishSubject<Void>()
init() {
self.input = Input(trigger: triggerSubject.asObserver())
let resultObservable = triggerSubject.flatMap { Observable.just("TEST") }
self.output = Output(result: resultObservable)
}
}
它编译并运行良好。但是,我需要用 来确认Combin
这个模式SwiftUI
,所以我将该代码转换为以下代码:
import SwiftUI
import Combine
struct ContentView: View {
var viewModel: ViewModel
var subscriptions = Set<AnyCancellable>()
init(viewModel: ViewModel) {
self.viewModel = viewModel
setupBindings()
}
var body: some View {
Button(action: {
// <---- how to trigger viewModel's trigger from here
}, label: {
Text("Click Me")
})
}
private func setupBindings() {
self.viewModel.output.result.sink(receiveValue: { value in
print("value is \(value)")
})
.store(in: &subscriptions) // <--- doesn't compile due to immutability of ContentView
}
}
class ViewModel {
struct Input {
let trigger: AnySubscriber<Void, Never>
}
struct Output {
let result: AnyPublisher<String, Never>
}
let input: Input
let output: Output
private let triggerSubject = PassthroughSubject<Void, Never>()
init() {
self.input = Input(trigger: AnySubscriber(triggerSubject))
let resultPublisher = triggerSubject
.flatMap { Just("TEST") }
.eraseToAnyPublisher()
self.output = Output(result: resultPublisher)
}
}
由于两个错误(在代码中注释),此示例无法编译:
(1) 问题一:如何像RxSwift
上面的情况一样从按钮的动作关闭中触发发布者的工作?
(2) 问题 2与架构设计有关,而不是编译错误:错误说:... Cannot pass immutable value as inout argument: 'self' is immutable ...
,那是因为SwiftUI
视图是结构,它们被设计为只能通过各种绑定 ( , 等 ...) 来更改@State
,@ObservedObject
我有与问题 2 相关的两个子问题:
sink
[A]:对于 View 中的发布者来说,这是否被认为是一种不好的做法SwiftUI
?这可能需要一些解决方法来将 存储cancellable
在View
的结构范围内?
[B]:就 MVVM 架构模式而言,哪个更适合SwiftUI/Combine
项目:使用具有 [ Input[Subscribers]、Output[AnyPublishers] ] 模式的
ObservableObject
ViewModel 还是具有 [ @Published
properties] 的 ViewModel?
解决方案
我在理解最佳 mvvm 方法时遇到了同样的问题。推荐也看看这个线程Best data-binding practice in Combine + SwiftUI?
将发布我的工作示例。应该很容易转换成你想要的。
SwiftUI 视图:
struct ContentView: View {
@State private var dataPublisher: String = "ggg"
@State private var sliderValue: String = "0"
@State private var buttonOutput: String = "Empty"
let viewModel: SwiftUIViewModel
let output: SwiftUIViewModel.Output
init(viewModel: SwiftUIViewModel) {
self.viewModel = viewModel
self.output = viewModel.bind(())
}
var body: some View {
VStack {
Text(self.dataPublisher)
Text(self.sliderValue)
Slider(value: viewModel.$sliderBinding, in: 0...100, step: 1)
Button(action: {
self.viewModel.buttonBinding = ()
}, label: {
Text("Click Me")
})
Text(self.buttonOutput)
}
.onReceive(output.dataPublisher) { value in
self.dataPublisher = value
}
.onReceive(output.slider) { (value) in
self.sliderValue = "\(value)"
}
.onReceive(output.resultPublisher) { (value) in
self.buttonOutput = value
}
}
}
抽象视图模型:
protocol ViewModelProtocol {
associatedtype Output
associatedtype Input
func bind(_ input: Input) -> Output
}
视图模型:
final class SwiftUIViewModel: ViewModelProtocol {
struct Output {
let dataPublisher: AnyPublisher<String, Never>
let slider: AnyPublisher<Double, Never>
let resultPublisher: AnyPublisher<String, Never>
}
typealias Input = Void
@SubjectBinding var sliderBinding: Double = 0.0
@SubjectBinding var buttonBinding: Void = ()
func bind(_ input: Void) -> Output {
let dataPublisher = URLSession.shared.dataTaskPublisher(for: URL(string: "https://www.google.it")!)
.delay(for: 5.0, scheduler: DispatchQueue.main)
.map{ "Just for testing - \($0)"}
.replaceError(with: "An error occurred")
.receive(on: DispatchQueue.main)
.share()
.eraseToAnyPublisher()
let resultPublisher = _buttonBinding.anyPublisher()
.dropFirst()
.flatMap { Just("TEST") }
.share()
.eraseToAnyPublisher()
return Output(dataPublisher: dataPublisher,
slider: _sliderBinding.anyPublisher(),
resultPublisher: resultPublisher)
}
}
SubjectBinding 属性包装器:
@propertyWrapper
struct SubjectBinding<Value> {
private let subject: CurrentValueSubject<Value, Never>
init(wrappedValue: Value) {
subject = CurrentValueSubject<Value, Never>(wrappedValue)
}
func anyPublisher() -> AnyPublisher<Value, Never> {
return subject.eraseToAnyPublisher()
}
var wrappedValue: Value {
get {
return subject.value
}
set {
subject.value = newValue
}
}
var projectedValue: Binding<Value> {
return Binding<Value>(get: { () -> Value in
return self.subject.value
}) { (value) in
self.subject.value = value
}
}
}
推荐阅读
- mysql - 一张mysql表的一列相邻行之间的时间差
- java - PDFBox:将图像从 JAR 资源加载到 PDF
- javascript - HTTP DELETE 的 RESTful API 不检查 null
- c - 我在 for 循环中做错了什么?
- java - 如何在 Spring 数据 r2dbc 中替换 @PrePersist
- javascript - Jquery从另一个链接设置href
- r - 通过 rvest 提取内容的 R web 抓取问题
- php - 如何在使用 Laravel 7 的视图中根据文件类型显示图标?
- vue.js - 如何将目录中的所有“vue”文件包含到构建中而不显式导入它们
- docker - vuejs dev 为 docker 构建动态输出(每次更改后更新文件)