如何在AsyncDisplayKit中设置节点布局

Question

我试图为AsyncDisplayKit中的节点设置userProfile设置的布局，但没有获得所需的结果。

1. 我有一个userProfile图像
2. userName标签
3. 设置按钮
4. 文章，评论和喜欢按钮我想要设置所有节点的水平和垂直对齐。

下面是我在layoutSpecThatFits方法中的代码

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

    photoNode.style.preferredSize = CGSize(width: ImageSize, height: ImageSize)
    settingButton.style.preferredSize = CGSize(width: 100, height: 50)
    label.style.preferredSize = CGSize(width: 100, height: 50)
    editbutton.style.preferredSize = CGSize(width: 120, height: 40)

    settingButton.style.alignSelf = .stretch
    let layout = ASStackLayoutSpec.horizontal()
    layout.alignItems = .center
    layout.justifyContent = .spaceAround
    layout.spacing = 10

    layout.children = [photoNode,settingButton]
   let settingButtonStackLocation = ASStackLayoutSpec(direction: .vertical,
                                        spacing: 15,
                                        justifyContent: .center,
                                        alignItems: .center,
                                        children: [layout,label,editbutton])
    settingButtonStackLocation.style.flexShrink = 1.0
    settingButtonStackLocation.style.flexGrow = 1.0





  let insets = UIEdgeInsets(top: 50, left: 30, bottom: 0, right: 30)
    let inset =  ASInsetLayoutSpec(insets: insets, child: settingButtonStackLocation)

    let horizontalButtonsStack = ASStackLayoutSpec.horizontal()
    horizontalButtonsStack.children = [postsButton,bucketButton,likesButton]
    horizontalButtonsStack.spacing = 20
    let verticalStack = ASStackLayoutSpec.vertical()
    verticalStack.children = [inset,horizontalButtonsStack]
    verticalStack.spacing = 10
    let buttonInsets = UIEdgeInsets(top: 0, left: 20, bottom: 0, right: 20)
    let buttonWithInsets = ASInsetLayoutSpec(insets: buttonInsets, child: verticalStack)

    let horizontalFollowersStack = ASStackLayoutSpec.horizontal()
    horizontalFollowersStack.children = [followersButton,followingButton]
    horizontalFollowersStack.spacing = 10
    let verticalFollowers = ASStackLayoutSpec.vertical()
    verticalFollowers.children = [buttonWithInsets,horizontalFollowersStack]
    verticalFollowers.spacing = 10
    verticalFollowers.alignItems = .center

    let followersInsets = UIEdgeInsets(top: 0, left: 20, bottom: 0, right: 20)
    let followersWithInsets = ASInsetLayoutSpec(insets: followersInsets, child: verticalFollowers)


    return followersWithInsets
 }

Answer 1

我想我为你找到了解决办法：

    [containerViewNode setLayoutSpecBlock:^ASLayoutSpec *(__kindof ASDisplayNode *node, ASSizeRange constrainedSize) {
        avatarImage.style.preferredSize = CGSizeMake(35, 35);
        settingsIcon.style.preferredSize = CGSizeMake(15, 15);
        ASCenterLayoutSpec *avatarCenterSpec = [[ASCenterLayoutSpec alloc] initWithHorizontalPosition:ASRelativeLayoutSpecPositionCenter verticalPosition:ASRelativeLayoutSpecPositionCenter sizingOption:ASRelativeLayoutSpecSizingOptionDefault child:avatarImage];
        avatarCenterSpec.style.flexBasis = ASDimensionMakeWithPoints(100);
        ASRelativeLayoutSpec *gearSpec = [[ASRelativeLayoutSpec alloc] initWithHorizontalPosition:ASRelativeLayoutSpecPositionEnd verticalPosition:ASRelativeLayoutSpecPositionStart sizingOption:ASRelativeLayoutSpecSizingOptionDefault child:settingsIcon];
        ASOverlayLayoutSpec *overlayLayoutSpec = [ASOverlayLayoutSpec overlayLayoutSpecWithChild:avatarCenterSpec overlay:gearSpec];
        ASStackLayoutSpec *mainSpec = [ASStackLayoutSpec stackLayoutSpecWithDirection:ASStackLayoutDirectionVertical spacing:0 justifyContent:ASStackLayoutJustifyContentCenter alignItems:ASStackLayoutAlignItemsStretch children:@[overlayLayoutSpec, textNodeStub]];
        return mainSpec;
    }];

看看ASOverlayLayoutSpec是如何与ASRelativeLayoutSpec一起工作的。我在github上共享的示例项目。