Wrapping nested ASStackLayoutSpec with AsyncDisplayKit

Question

Using nested ASStackLayoutSpec with AsyncDisplayKit I am trying to achieve this

So I am creating a vertical ASStackLayoutSpec with avatar and another horizontal ASStackLayoutSpec with the user name and timestamp and text

override func layoutSpecThatFits(_ constrainedSize: ASSizeRange) -> ASLayoutSpec {
    // HEADER with username and timestamp
    let spacer = ASLayoutSpec()
    spacer.style.flexGrow = 1
    let headerStackSpec = ASStackLayoutSpec.horizontal()
    headerStackSpec.spacing = 2
    headerStackSpec.alignItems = .baselineFirst
    headerStackSpec.children = [userNode, spacer, timestampNode]

    // CONTENT - HEADER and text
    let contentStackSpec = ASStackLayoutSpec.vertical()
    contentStackSpec.spacing = 2
    contentStackSpec.children = [headerStackSpec, messageNode]

    // MAIN - avatar and CONTENT
    let mainStackSpec = ASStackLayoutSpec.horizontal()
    mainStackSpec.spacing = 9
    mainStackSpec.children = [avatarNode, contentStackSpec]

    return ASInsetLayoutSpec(insets: UIEdgeInsets(top: 2, left: 10, bottom: 2, right: 10), child: mainStackSpec)
}

But the result is not what I expected

It looks like the text goes to infinity, not properly wraping. The timestamp is also probably somewhere far away on the right out of bounds.

I tried different combinations of .alignItems and .justifyContent but I cannot get it to work.

Try setting the style.width for ASLayoutElements like ASStackLayoutSpec etc — Nishu_Priya, Jul 11 '18 at 18:00

score 1 · Accepted Answer · edited Mar 26 '23 at 00:59

1

try these properties:

contentStackSpec.style.flexShrink = 1
messageNode.style.flexShrink = 1
contentStackSpec.children = [headerStackSpec, messageNode]

edited Mar 26 '23 at 00:59

sudoExclaimationExclaimation

7,992
10
47
105

answered Jul 14 '18 at 06:41

Bimawa

3,535
2
25
45

score 0 · Answer 2 · answered Jul 12 '18 at 08:29

0

You need to set the width of you message node in the method layoutSpecThatFits:

let messageWidth = UIScreen.main.bounds - (leftSpacing + rightSpacing)
message.style.width = ASDimension(unit: .points, value: messageWidth)

answered Jul 12 '18 at 08:29

Nishu_Priya

1,251
1
10
23

Wrapping nested ASStackLayoutSpec with AsyncDisplayKit

2 Answers2