Question

我有一个ASViewController呈现了一个ASTableNode。

我想在每行中使用ASNetworkImageNode来渲染图像。

我知道宽度/高度，因此能够正确设置比率。因此，我在图片上使用了ASRatioLayoutSpec。

我遇到的问题是，我将在行中包含ASNetworkImageNode和其他子节点。

如何在layoutSpecThatFits方法中正确设置比率？

如果我将其更改如下：

override func layoutSpecThatFits(_ constrainedSize: ASSizeRange) -> ASLayoutSpec {

    let ratio: CGFloat = props.size.height / props.size.width
    let imageRatioSpec = ASRatioLayoutSpec(ratio: ratio, child: self.imageNode)
    return imageRatioSpec

}

它工作完美，但是我不能以这种方式返回任何其他子节点。

我期待着这样的事情：

override func layoutSpecThatFits(_ constrainedSize: ASSizeRange) -> ASLayoutSpec {

    let ratio: CGFloat = props.size.height / props.size.width
    let imageRatioSpec = ASRatioLayoutSpec(ratio: ratio, child: self.imageNode)


    return ASStackLayoutSpec(
        direction: .horizontal,
        spacing: 16,
        justifyContent: .start,
        alignItems: .center,
        children: [imageRatioSpec, textNode] // returns image and text
    )
}

但是不显示图像，或者至少没有设置比例，因此图像不可见。

import AsyncDisplayKit

class FeedNodeController: ASViewController<ASTableNode> {
        var data = [
        FeedItem(url: "https://pbs.twimg.com/media/EAtM2HyXUAEXJkA.jpg", size: .init(width: 1200, height: 800)),
        FeedItem(url: "https://pbs.twimg.com/media/EAtBZzOXUAEqeNJ.jpg", size: .init(width: 680, height: 510)),
        FeedItem(url: "https://pbs.twimg.com/media/EAsxYhlXoAArJe7.jpg", size: .init(width: 680, height: 453)),
        FeedItem(url: "https://pbs.twimg.com/media/EAss0ACXoAAUtlc.jpg", size: .init(width: 1115, height: 1200))
    ]

    init() {
        super.init(node: FeedTableNode())
    }

    required init?(coder aDecoder: NSCoder) {
        return nil
    }

    override func viewDidLoad() {
        super.viewDidLoad()

        node.dataSource = self
        node.delegate = self
        node.view.tableFooterView = UIView()
    }
}

extension FeedNodeController:  ASTableDataSource, ASTableDelegate {
    func numberOfSections(in tableNode: ASTableNode) -> Int {
        return 1
    }

    func tableNode(_ tableNode: ASTableNode, numberOfRowsInSection section: Int) -> Int {
        return data.count
    }

    func tableNode(_ tableNode: ASTableNode, nodeBlockForRowAt indexPath: IndexPath) -> ASCellNodeBlock {
        let props = data[indexPath.row]

        let nodeBlock: ASCellNodeBlock = { () -> ASCellNode in
            return FeedCellNode(props)
        }
        return nodeBlock
    }
}

class FeedTableNode: ASTableNode { }

class FeedCellNode: ASCellNode {

    private var props: FeedItem

    private lazy var imageNode: ASNetworkImageNode = {
        let node = ASNetworkImageNode()
        return node
    }()

    init(_ props: FeedItem) {
        self.props = props
        super.init()

        automaticallyManagesSubnodes = true
        imageNode.url = props.url
        addSubnode(imageNode)
    }

    override func layoutSpecThatFits(_ constrainedSize: ASSizeRange) -> ASLayoutSpec {

        let ratio: CGFloat = props.size.height / props.size.width
        let imageRatioSpec = ASRatioLayoutSpec(ratio: ratio, child: self.imageNode)

        return ASStackLayoutSpec(
            direction: .horizontal,
            spacing: 16,
            justifyContent: .start,
            alignItems: .center,
            children: [imageRatioSpec]
        )
    }
}



struct FeedItem {
    var url: URL
    var size: CGSize

    init(url: String, size: CGSize) {
        self.url = URL(string: url)!
        self.size = size
    }
}

Answer 1

您需要将ASStackLayoutSpec更改为垂直堆栈。

   return ASStackLayoutSpec(
            direction: .vertical,
            spacing: 16,
            justifyContent: .start,
            alignItems: .center,
            children: [imageRatioSpec, textNode]
        )

如何设置子ASNetworkImageNode的比例

1 个答案: