RxSwift+MVVM项目实战-单分组UITableView的使用

简介: RxSwift+MVVM项目实战-单分组UITableView的使用

本文主要介绍利用RxSwift+MVVM实现只有一个分组的列表,实现效果如图(文末附源码):

Model

title:显示的标题

targetVC:点击每个item的时候,用作创建控制器以及跳转使用

class RootModel {
    var title: String?
    var targetVC: UIViewController.Type?
    init(title: String?, targetVC: UIViewController.Type) {
        self.title = title
        self.targetVC = targetVC
    }
}


RootCellViewModel

用于将标题绑定到cellUI控件上,以及获取跳转控制器

class RootCellViewModel: NSObject {
    var title = BehaviorRelay<String?>(value: nil)
    var targetVC = BehaviorRelay<UIViewController.Type?>(value: nil)
    init(model: RootModel) {
        self.title.accept(model.title)
        self.targetVC.accept(model.targetVC)
    }
}


RootTableViewCell

主要是cell内部子控件的布局,以及绑定数据到UI

func bind(to viewModel: RootCellViewModel) {
    if let _label = textLabel {
        viewModel.title.bind(to: _label.rx.text).disposed(by: disposeBag)
    }
}


RootViewModel

Input.refresh:接收刷新时机的事件

Output.items:用于TableView绑定内容


class RootViewModel {
    struct Input {
        let refresh: Observable<Void>
    }
    struct Output {
        let items: BehaviorRelay<[RootCellViewModel]>
    }
    func transform(input: Input) -> Output {
        let dataSource = BehaviorRelay<[RootCellViewModel]>(value: [])
        input.refresh.map {[weak self] (_) -> [RootCellViewModel] in
            return self?.dataSource ?? []
        }.bind(to: dataSource).disposed(by: disposeBag)
        return Output(items: dataSource)
    }
    private var dataSource: [RootCellViewModel] {
        get {
             return [...]
        }
    }
}


RootViewController

绑定ViewModel数据,以及监听事件并做出响应

private func bindToViewModel() {
    let output = viewModel.transform(input: RootViewModel.Input(refresh: Observable.just(())))
    //设置cell的数据源
    output.items.asDriver().drive(tableView.rx.items(cellIdentifier: cellId, cellType: RootTableViewCell.self)) {row, viewModel, cell in
        cell.bind(to: viewModel)
    }.disposed(by: disposeBag)
    //cell点击事件直接可以拿到模型数据
    tableView.rx.modelSelected(RootCellViewModel.self).subscribe {[weak self] (cellModel) in
        if let targetVC = cellModel.element?.targetVC.value {
            self?.navigationController?.pushViewController(targetVC.init(), animated: true)
        }
    }.disposed(by: disposeBag)
    //cell点击事件拿到indexPath
    tableView.rx.itemSelected.subscribe {[weak tableView] in tableView?.deselectRow(at: $0, animated: true) }.disposed(by: disposeBag)
    //可以利用它来遵守UITableViewDelegate协议,自己实现代理方法
    tableView.rx.setDelegate(self).disposed(by: disposeBag)
}

注意:tableView设置代理不可以再使用tableView.delegate = self,而是使用tableView.rx.setDelegate(self),否则会抛出异常;

收藏划线


相关文章
|
数据库 容器
Flutter笔记:滚动之-无限滚动与动态加载的实现
Flutter笔记:滚动之-无限滚动与动态加载的实现
855 0
|
存储 设计模式 Dart
Flutter笔记:getX库中的GetView中间件
Flutter笔记:getX库中的GetView中间件
848 0
|
SQL JSON Java
Hive【Hive(四)函数-单行函数】
Hive【Hive(四)函数-单行函数】
Flutter ListView懒加载(滑动不加载,停止滑动加载)
前言:为了更好的减小网络的带宽,使得列表更加流畅,我们需要了解懒加载,也称延迟加载。关于上一章的登录界面,各位属实难为我了,我也在求ui小姐姐,各位点点赞给我点动力吧~
|
4月前
|
关系型数据库 MySQL 分布式数据库
阿里云PolarDB云原生数据库MySQL和PostgreSQL全解析:兼容性、性能、费用价格及稳定可靠性深度测评
阿里云PolarDB是Gartner连续6年认证的全球云数据库领导者,100%兼容MySQL/PostgreSQL/Oracle,交易性能提升6倍、分析性能提升400倍、TCO降低50%,支持HTAP、Serverless弹性与99.995%高可用,已服务富友支付、小鹏汽车等头部企业。
501 8
|
存储 设计模式 Dart
Flutter笔记:GetX模块中不使用 Get.put 怎么办
依赖注入(Dependency Injection,对于很多真的就是简单的局部共享状态的场景,自己实现单例我个人感觉反而更好。首先,你不需要集中于创建代码初期就从各个模块中导入你的各个控制器,也不需要预先在应用初始化时就创建它们的实例,从而将实例添加到GetX依赖中进行管理。这使得mian文件中的代码更加简洁。如果某个局部状态控制器被移除,你也不需要回到mian文件中来对代码进行改动,只需要删除不用的部分。其次,在Dart语言中,为面向对象的单例实现提供了很方便的支持,仅仅三个小步骤就可以实现严格管理单例。
407 1
|
前端开发 UED 开发者
【Flutter前端技术开发专栏】Flutter中的列表与滚动视图优化
【4月更文挑战第30天】Flutter开发中,优化列表和滚动视图至关重要。本文介绍了几种优化方法:1) 使用`ListView.builder`和`GridView.builder`实现懒加载;2) 复用子组件以减少实例创建;3) 利用`CustomScrollView`和`Slivers`提升滚动性能;4) 通过`NotificationListener`监听滚动事件;5) 使用`KeepAlive`保持列表项状态。掌握这些技巧能提升应用性能和用户体验。
436 1
【Flutter前端技术开发专栏】Flutter中的列表与滚动视图优化
|
机器学习/深度学习 Python
使用Python实现超参数调优
使用Python实现超参数调优
376 0
|
JSON HandyJSON Swift
RxSwift+MVVM项目实战-多分组TableView+MJRefresh+RxAlamofire+HandyJSON的使用
RxSwift+MVVM项目实战-多分组TableView+MJRefresh+RxAlamofire+HandyJSON的使用
674 0
|
存储 Swift
RxSwift+MVVM项目实战-多分组UITableView结合RxDataSources的使用
RxSwift+MVVM项目实战-多分组UITableView结合RxDataSources的使用
770 0