Swift 基于MVVM架构实现完整列表数据展示与交互功能实战案例
一、架构简介
MVVM 在 iOS 开发圈子里已经算是主流标配了。跟传统的 MVC 相比，它把职责拆得更清楚：View 只管页面长什么样、用户怎么点；ViewModel 负责业务逻辑、数据处理和视图状态的管理；Model 就老老实实承载数据模型。这么一拆，视图和业务逻辑就彻底解耦了，代码可读性、可维护性，甚至单元测试的友好度，都上了一个台阶。对于列表类这种常规业务来说，MVVM 几乎是天然适配的。
这篇就以一个基础列表页为例，从零开始，把数据渲染、单元格复用、点击交互、数据刷新这些核心功能一一走通。全程用原生 Swift，适配 iOS 14+，不依赖第三方框架。
二、项目结构
目录划分清晰，严格遵循 MVVM 的分层逻辑：
├── Model // 数据模型层
├── ViewModel // 业务逻辑层
├── View // 视图层（控制器、自定义Cell）
三、代码实现
3.1 数据模型（Model）
先建一个列表数据源模型。采用 Codable 协议，方便后续网络数据解析。这里定义列表展示所需的几个核心字段：
import Foundation
// 列表数据模型
struct ListModel: Codable {
let id: Int
let title: String
let desc: String
}
3.2 视图模型（ViewModel）
ViewModel 是整个架构的枢纽层。它封装了数据请求、数据数组管理、单元格数据赋值、点击事件回调——但绝不持有任何视图对象。通过闭包来回调数据刷新和点击事件，视图和逻辑之间就彻底松绑了。
import Foundation
class ListViewModel {
// 数据源数组
private(set) var dataArray: [ListModel] = []
// 数据刷新回调
var reloadDataClosure: (() -> Void)?
// 单元格点击回调
var cellClickClosure: ((ListModel) -> Void)?
// 模拟请求本地/网络数据
func requestListData() {
// 模拟异步网络请求
DispatchQueue.global().asyncAfter(deadline: .now() + 0.5) { [weak self] in
guard let self = self else { return }
// 构造测试数据
let tempData = [
ListModel(id: 1, title: "Swift基础语法", desc: "Swift数据类型、函数与流程控制讲解"),
ListModel(id: 2, title: "UIKit控件使用", desc: "UILabel、UIButton、UITableView实战"),
ListModel(id: 3, title: "MVVM架构思想", desc: "架构分层与解耦设计原则")
]
self.dataArray = tempData
// 主线程回调刷新视图
DispatchQueue.main.async {
self.reloadDataClosure?()
}
}
}
// 获取单个单元格数据
func getCellModel(index: Int) -> ListModel? {
guard index >= 0, index < dataArray.count else { return nil }
return dataArray[index]
}
// 触发单元格点击事件
func didSelectRow(index: Int) {
guard let model = getCellModel(index: index) else { return }
cellClickClosure?(model)
}
}
3.3 自定义单元格（View）
ListCell 封装了 UITableViewCell，只负责两件事：UI 布局和数据赋值。不处理任何业务逻辑，ViewModel 把数据传过来，它照单显示就行。
import UIKit
class ListCell: UITableViewCell {
// UI控件
private let titleLabel: UILabel = {
let label = UILabel()
label.font = UIFont.systemFont(ofSize: 16, weight: .semibold)
return label
}()
private let descLabel: UILabel = {
let label = UILabel()
label.font = UIFont.systemFont(ofSize: 13)
label.textColor = .gray
label.numberOfLines = 0
return label
}()
// 初始化布局
override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
super.init(style: style, reuseIdentifier: reuseIdentifier)
setupUI()
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
// 页面布局
private func setupUI() {
contentView.addSubview(titleLabel)
contentView.addSubview(descLabel)
titleLabel.translatesAutoresizingMaskIntoConstraints = false
descLabel.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
titleLabel.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 12),
titleLabel.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 16),
titleLabel.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -16),
descLabel.topAnchor.constraint(equalTo: titleLabel.bottomAnchor, constant: 8),
descLabel.leadingAnchor.constraint(equalTo: titleLabel.leadingAnchor),
descLabel.trailingAnchor.constraint(equalTo: titleLabel.trailingAnchor),
descLabel.bottomAnchor.constraint(equalTo: contentView.bottomAnchor, constant: -12)
])
}
// 绑定数据
func configData(model: ListModel) {
titleLabel.text = model.title
descLabel.text = model.desc
}
}
3.4 主控制器（View）
控制器作为视图载体，职责很简单：创建视图、绑定 ViewModel 的回调、响应页面交互。所有业务逻辑都扔给 ViewModel 去处理，控制器只管“接活儿”。
import UIKit
class ListViewController: UIViewController {
// 初始化ViewModel
private let viewModel = ListViewModel()
private let tableView = UITableView()
private let cellID = "ListCell"
override func viewDidLoad() {
super.viewDidLoad()
setupBase()
setupTableView()
bindViewModel()
// 发起数据请求
viewModel.requestListData()
}
private func setupBase() {
view.backgroundColor = .white
title = "MVVM列表实战"
}
// 初始化表格
private func setupTableView() {
view.addSubview(tableView)
tableView.translatesAutoresizingMaskIntoConstraints = false
tableView.frame = view.bounds
tableView.delegate = self
tableView.dataSource = self
tableView.register(ListCell.self, forCellReuseIdentifier: cellID)
tableView.tableFooterView = UIView()
}
// 绑定ViewModel回调
private func bindViewModel() {
// 数据刷新
viewModel.reloadDataClosure = { [weak self] in
self?.tableView.reloadData()
}
// 单元格点击
viewModel.cellClickClosure = { model in
print("点击条目：(model.title)，ID：(model.id)")
let alert = UIAlertController(title: "点击提示", message: model.title, preferredStyle: .alert)
alert.addAction(UIAlertAction(title: "确定", style: .default))
self.present(alert, animated: true)
}
}
}
// UITableView 袋里与数据源
extension ListViewController: UITableViewDataSource, UITableViewDelegate {
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return viewModel.dataArray.count
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
guard let cell = tableView.dequeueReusableCell(withIdentifier: cellID, for: indexPath) as? ListCell,
let model = viewModel.getCellModel(index: indexPath.row) else {
return UITableViewCell()
}
cell.configData(model: model)
return cell
}
func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
tableView.deselectRow(at: indexPath, animated: true)
viewModel.didSelectRow(index: indexPath.row)
}
}
四、功能测试与总结
运行效果很直观：项目启动后，页面异步加载模拟数据，列表自动渲染；点击任意单元格，弹出提示弹窗并打印日志，单元格正常取消选中状态。整个交互流程一气呵成。
架构上的优势也一目了然：Model 只管数据，不带任何视图代码；ViewModel 独立处理数据请求和业务逻辑，可以单独做单元测试；View 只专注 UI 展示。代码分层清晰，后期维护和扩展都省心。
如果后续项目需要扩展，可以在这个基础上继续加：下拉刷新、上拉加载更多、网络异常处理、空页面占位图等通用功能，适配更复杂的业务场景完全没问题。
