具有 AsyncDisplayKit 布局的简单单元格答案

【问题标题】：Simple Cell with AsyncDisplayKit Layout具有 AsyncDisplayKit 布局的简单单元格
【发布时间】：2016-12-30 05:45:29
【问题描述】：

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

设计：

细胞：

所以每个单元格都有一个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.

有没有办法做到这一点？

【问题讨论】：

标签： ios swift autolayout asyncdisplaykit

【解决方案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

【讨论】：