UICollectionView 和 MVVM

Posted 2023-02-22

【中文标题】UICollectionView 和 MVVM

【英文标题】：UICollectionView and MVVM

【发布时间】：2018-08-08 18:39:57

【问题描述】：

我正在尝试了解如何使用 MVVM 开发可重复使用的UICollectionViewController。

假设您为UICollectionViewCell 的每种类型创建一个视图模型

struct CollectionTestCellViewModel 
    let name: String
    let surname: String

    var identifier: String 
        return CollectionTestCell.identifier
    

    var size: CGSize?

还有细胞：

class CollectionTestCell: UICollectionViewCell 
    @IBOutlet weak var surnameLabel: UILabel!
    @IBOutlet weak var nameLabel: UILabel!

    func configure(with viewModel: CollectionTestCellViewModel) 
        surnameLabel.text = viewModel.surname
        nameLabel.text = viewModel.name
    

在视图控制器中我有类似的东西：

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell 
    let viewModel = sections[indexPath.section][indexPath.row]
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: viewModel.identifier, for: indexPath)
    configure(view: cell, with: viewModel)
    return cell

到目前为止没有问题。 但是现在考虑UICollectionViewDelegateFlowLayout这个方法：

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize 
    let viewModel = sections[indexPath.section][indexPath.row]
    return viewModel.size ?? UICollectionViewFlowLayoutAutomaticSize

关键是我在视图模型中有布局信息（单元格的大小）。这允许我将布局委托方法放入我的视图控制器，但我不知道这是否违反了 MVVM 模式。

最后一个问题是：我应该在视图模型（例如单元格）中放置什么？是否“允许”将布局数据放入视图模型中？

谢谢

【参考方案1】：

在 MVVM 中，视图由仅视觉元素组成。我们只做布局、动画、初始化 UI 组件等。在 View 和 Model 之间有一个特殊的层，称为 ViewModel。

ViewModel提供了一组接口，每个接口都代表视图中的一个 UI 组件。我们使用一种称为“绑定”的技术将 UI 组件连接到 ViewModel 接口。所以，在 MVVM 中，我们不直接接触 View，我们在 ViewModel 中处理业务逻辑，因此 View 会相应地改变自己。

我们在 ViewModel 中而不是在 View 中编写演示性内容，例如将 Date 转换为 String。

因此，可以在不知道视图实现的情况下为表示逻辑编写更简单的测试。

了解更多关于 ios 中 MVVM 的信息read this article。

【讨论】：

我觉得这句话有歧义：“ViewModel提供了一组接口，每个接口代表View中的一个UI组件” 这个表示可以包括UI事物的大小、颜色、字体等？

@drakon 我们在 ViewModel 中创建具有大小、颜色等的属性。然后在 ViewController（MVVM 中的 View）中创建 ViewModel 的实例变量并从中获取值。

@drakon 如果我的回答对您有帮助，请不要忘记将其标记为答案）