ios - 具有 AsyncDisplayKit 布局的简单单元格

Question

我正在尝试使用 Facebook 的 AsyncDisplayKit 构建以下设计，但在构建单元格和 TableHeaderView 时遇到问题。

设计:

单元格:

因此每个 Cell 都有一个 ASImageNode 和一个 ASEditableTextNode，具有以下布局:

override func layoutSpecThatFits(_ constrainedSize: ASSizeRange) -> ASLayoutSpec {
    var cellChildren = [ASLayoutElement]()

    let iconTextfieldStack = ASStackLayoutSpec.horizontal()
    iconTextfieldStack.alignItems = .center
    iconTextfieldStack.justifyContent = .start
    iconTextfieldStack.style.flexShrink = 1.0
    iconTextfieldStack.style.flexGrow = 1.0

    _iconImageView.style.preferredSize = CGSize(width: 30, height: 30)
    cellChildren.append(ASInsetLayoutSpec(insets: UIEdgeInsetsMake(10, 10, 10, 10), child: _iconImageView))

    _textField.style.spacingBefore = 10
    cellChildren.append(ASInsetLayoutSpec(insets: UIEdgeInsetsMake(0, 0, 0, 10), child: _textField))

    iconTextfieldStack.children = cellChildren


    return ASInsetLayoutSpec(insets: UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0), child: iconTextfieldStack)
}

结果是这样的:

如您所见，第 3 行 ASEditableTextNode 超出了单元格宽度(第一个问题)。另一件事是 ASEditableTextNode 不会扩展其高度(和单元格高度)来显示 ASEditableTextNode 文本的行。我也收到了这个警告:

-[UIWindow endDisablingInterfaceAutorotationAnimated:] called on <UIRemoteKeyboardWindow: 0x1024c9c00; frame = (0 0; 375 667); opaque = NO; autoresize = W+H; layer = <UIWindowLayer: 0x17022e4c0>> without matching -beginDisablingInterfaceAutorotation. Ignoring.

有没有办法做到这一点？

Answer 1

感谢 slack 小组，我通过将函数更改为:

解决了这个问题

override func layoutSpecThatFits(_ constrainedSize: ASSizeRange) -> ASLayoutSpec {
    var cellChildren = [ASLayoutElement]()

    let iconTextfieldStack = ASStackLayoutSpec.horizontal()
    iconTextfieldStack.alignItems = .center
    iconTextfieldStack.justifyContent = .start
    iconTextfieldStack.style.flexShrink = 1.0
    iconTextfieldStack.style.flexGrow = 1.0

    _iconImageView.style.preferredSize = CGSize(width: 30, height: 30)
    _iconImageView.style.alignSelf = .start
    cellChildren.append(ASInsetLayoutSpec(insets: UIEdgeInsetsMake(10, 10, 10, 10), child: _iconImageView))

    _textField.style.spacingBefore = 10

    let textInset = ASInsetLayoutSpec(insets: UIEdgeInsetsMake(10, 0, 10, 10), child: _textField)
    textInset.style.flexShrink = 1.0

    cellChildren.append(textInset)

    iconTextfieldStack.children = cellChildren


    return iconTextfieldStack
}

主要的关键是将 flexShrink 添加到文本字段的 ASInsetLayoutSpec