ComponentsKit - 将项目与堆栈组件内的右对齐

Question

如何将 2 个项目添加到堆栈组件，以使堆栈拉伸其父项的整个宽度，并将包含的项目锚定到堆栈容器中的相对两侧？

我发现的一个解决方案是添加一个宽度很大的空视图。这真的很糟糕。

#import "KPIComponent.h"
#import "CKImageComponent.h"
#import "CKStackLayoutComponent.h"
#import "CKLabelComponent.h"
#import "CKInsetComponent.h"

static UIImage *myImage;
@implementation KPIComponent

+(void)load {
    static dispatch_once_t onceToken;
    dispatch_once(&onceToken, ^{
        myImage = [UIImage imageNamed:@"1"];
    });
}
+(instancetype)newWith {

    CKImageComponent * imageComponent = [CKImageComponent newWithImage: myImage];


    CKComponent * labelComponent = [self label];

    CKComponent *flexy = [self flex]; // add this as a separator 
    CKStackLayoutComponent *stack = [CKStackLayoutComponent newWithView:{
        [UIView class],
        {
            {@selector(setBackgroundColor:),[UIColor blueColor]}
        }
    }size:{
    }style:{
        .direction = CKStackLayoutDirectionHorizontal
    }children:{
        {
            .component = labelComponent,
        },
        {
            .component = flexy,
            .flexShrink = YES,
            .spacingBefore = 2,
            .spacingAfter = 2
        },
        {
            .component = imageComponent,
        }
    }];
    return [super newWithComponent:stack];


}

+(CKComponent *)label {
    CKLabelComponent *label = [CKLabelComponent newWithLabelAttributes:{
        .string = @"Some String",
        .font = [UIFont fontWithName:@"Baskerville" size:30],
        .color = [UIColor whiteColor],
        .maximumNumberOfLines = 0,
        .lineBreakMode = NSLineBreakByCharWrapping
    }viewAttributes:{
        {@selector(setBackgroundColor:), [UIColor clearColor]}
    }];
    return label;
//    CKInsetComponent *inset = [CKInsetComponent newWithInsets:{.top = 0, .left = 0, .bottom = 0, .right = 0} component:label];
//    return inset;

}

+(CKComponent *)flex {
    return [CKComponent newWithView:{
        [UIView class],
        {
            {@selector(setBackgroundColor:),[UIColor clearColor]}
        }
    }size:{10000,1}]; // a huge width so that if takes the full parent
}

@end

Answer 1

您应该在stacklayoutComponent中设置左侧组件的.flexGrow = YES。