ASyncDisplayKit技术问题：容器内能否放置多个Texture节点？

你的需求——屏幕上半部分放ASTableNode，下方放带UIView块的ASDisplayNode——完全可以实现，咱们来排查下你可能踩的坑，再给出具体的解决步骤：

常见问题排查与解决方案 #

1. 确保子节点已正确添加到容器 #

首先要确认你已经把两个子节点添加到了ASViewController的根节点上，这是最容易忽略的一步：

// 在ViewController的初始化方法里添加
self.node.addSubnode(tableNode)
self.node.addSubnode(customDisplayNode)

2. 给子节点设置合理的尺寸约束 #

• ASTableNode：如果没有设置行高相关的属性，它可能会因为高度为0而不显示。你需要实现ASTableDataSource的tableNode(_:nodeBlockForRowAt:)方法，并且确保每个cell节点有明确的尺寸；或者给tableNode设置预估行高：

  tableNode.view.estimatedRowHeight = 80
  tableNode.view.rowHeight = UITableView.automaticDimension
  

• 自定义ASDisplayNode：对于包裹UIView的节点，你需要通过style.preferredSize给它设置固定高度（或者在layoutSpec中分配空间），比如：

  customDisplayNode.style.preferredSize = CGSize(width: UIScreen.main.bounds.width, height: 60)
  

3. 正确配置ASStackLayoutSpec #

你的思路用垂直方向的ASStackLayoutSpec是对的，但需要给子节点设置flexGrow/flexShrink属性来分配空间：

override func layoutSpecThatFits(_ constrainedSize: ASSizeRange) -> ASLayoutSpec {
    // 创建垂直布局的Stack
    let stackLayout = ASStackLayoutSpec(
        direction: .vertical,
        spacing: 0,
        justifyContent: .start,
        alignItems: .stretch,
        children: [tableNode, customDisplayNode]
    )
    
    // 让ASTableNode占据屏幕剩余的所有空间
    tableNode.style.flexGrow = 1.0
    // 让自定义节点保持自身高度，不被压缩
    customDisplayNode.style.flexShrink = 0.0
    
    return stackLayout
}

完整示例代码 #

这里给你一个可直接参考的完整ViewController实现：

import AsyncDisplayKit

class MixedNodesViewController: ASViewController<ASDisplayNode>, ASTableDataSource {
    private let tableNode = ASTableNode(style: .plain)
    private let customBottomNode = ASDisplayNode {
        let view = UIView()
        view.backgroundColor = .systemBlue
        return view
    }
    
    init() {
        super.init(node: ASDisplayNode())
        setupNodes()
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    private func setupNodes() {
        // 添加子节点到根节点
        node.addSubnode(tableNode)
        node.addSubnode(customBottomNode)
        
        // 配置tableNode
        tableNode.dataSource = self
        tableNode.view.estimatedRowHeight = 80
        tableNode.view.rowHeight = UITableView.automaticDimension
        
        // 配置自定义底部节点的尺寸
        customBottomNode.style.preferredSize = CGSize(width: UIScreen.main.bounds.width, height: 60)
    }
    
    override func layoutSpecThatFits(_ constrainedSize: ASSizeRange) -> ASLayoutSpec {
        let stackLayout = ASStackLayoutSpec(
            direction: .vertical,
            spacing: 0,
            justifyContent: .start,
            alignItems: .stretch,
            children: [tableNode, customBottomNode]
        )
        
        tableNode.style.flexGrow = 1.0
        customBottomNode.style.flexShrink = 0.0
        
        return stackLayout
    }
    
    // MARK: - ASTableDataSource
    func tableNode(_ tableNode: ASTableNode, numberOfRowsInSection section: Int) -> Int {
        return 20 // 随便设置一些行数让table有内容
    }
    
    func tableNode(_ tableNode: ASTableNode, nodeBlockForRowAt indexPath: IndexPath) -> ASCellNodeBlock {
        return {
            let cellNode = ASTextCellNode()
            cellNode.text = "第 \(indexPath.row + 1) 行"
            return cellNode
        }
    }
}

按照这个方式实现，你就能看到上半部分的表格和下方的蓝色自定义视图正常显示啦！

内容的提问来源于stack exchange，提问作者Joel