Telegram研究：ListView的基本用户

1、继承关系

ListView: ASDisplayNode

2、刷新

刷新:(类似UITableView.reloadData()) 但是这个需要传入删、增加、修改那些数据， self.transaction(deleteIndices: xxx, insertIndicesAndItems: xxx, updateIndicesAndItems: xxx, options: ....)

3、数据

var deleteItems: [ListViewDeleteItem]
var insertItems: [ListViewInsertItem]
var updateItems: [ListViewUpdateItem]

ListViewInsertItem、ListViewUpdateItem里包裹着真正的数据ListViewItem

自定义数据 ChatMessageItemImpl: ChatMessageItem: ListViewItem, 需要实现的几个核心内容

 public protocol ListViewItem {
    // 定义每一行的展示
    // 制定每一行展示的node
    func nodeConfiguredForParams(async: ....)
    // 更新
    func updateNode(async: ...)
}

ChatMessageItem有一个headers，用于控制展示时间等header

public protocol ChatMessageItem: ListViewItem {
    // 用于header的展示
    var headers: [ListViewItemHeader] { get }
}

例子写法

class ChatMessageItemImpl: ChatMessageItem {
    //...
    // 保存header的数据
    var headers: [ListViewItemHeader]
    // 制定每一行展示的node
    func nodeConfiguredForParams(async: ....) {
        // ... 
        // 指定node及相关操作
    }
    // 更新
    func updateNode(async: ...) {
        // 相关更新操作
    }
}

每一个ListViewItem制定对应的Node,在ChatMessageItemView里有个headers的展示 ChatMessageItemView: ListViewItemNode: ASDisplayNode

每行数据item的ListViewItemNode的核心方法

open class ListViewItemNode: ASDisplayNode, AccessibilityFocusableNode {
    // 控制展示headers
    open func headers() -> [ListViewItemHeader]? {
        return nil
    }
}

每行展示UI的itemView一般的标准写法

class ChatMessageBubbleItemNode: ChatMessageItemView {

    // 更具对应的item的数据，控制header
    // ListView会将headers聚合起来，在row之外的地方展示，类似UITableView的header
    open func headers() -> [ListViewItemHeader]? {
        return item.headers
    }

    // 指定node的布局及frame
    override public func asyncLayout() -> ... {
        return { _, _, _, _, _ in
            return ...
        }
    }
}