我刚刚开始玩ComponentKit而且我在水平对齐2个标签方面遇到了一些困难。 我希望第一个靠近左边距,第二个靠近右边。
使用自动布局,我可以使用这组约束来实现:
H:|-0-[_label1]-[_label2]-0-|
我尝试的所有东西似乎都没有效果,我总是得到相同的结果:两个标签都是左对齐的。
这是超级简单的组件:
+ (instancetype)newWithText1:(NSString *)text1 text2:(NSString *)text2
{
return [super
newWithComponent:
[CKStackLayoutComponent
newWithView:{}
size:{}
style:{
.direction = CKStackLayoutDirectionHorizontal,
.alignItems = CKStackLayoutAlignItemsCenter
}
children:{
{
[CKLabelComponent
newWithLabelAttributes:{
.string = text1,
.font = [UIFont systemFontOfSize:20],
.color = [UIColor blackColor]
}
viewAttributes:{
{@selector(setBackgroundColor:), [UIColor clearColor]}
}],
.alignSelf = CKStackLayoutAlignSelfStretch
},
{
[CKLabelComponent
newWithLabelAttributes:{
.string = text2,
.font = [UIFont systemFontOfSize:20],
.color = [UIColor redColor],
.alignment = NSTextAlignmentRight
}
viewAttributes:{
{@selector(setBackgroundColor:), [UIColor clearColor]}
}],
.alignSelf = CKStackLayoutAlignSelfStretch
}
}]];
}
如果有人有任何建议会非常感激。
答案 0 :(得分:6)
很棒的发现 - 这是我们的flexbox实现(CKStackLayoutComponent
)的一个缺点。您正在寻找相当于justify-content: space-between;
的内容,但我们还不支持。
如果您想在堆栈布局实施中提交补丁以支持此功能,我们非常感谢。否则,我会尝试找人添加支持。
现在,您可以通过使用flexGrow = YES:
放置间隔来伪造它+ (instancetype)newWithText1:(NSString *)text1 text2:(NSString *)text2
{
return [super
newWithComponent:
[CKStackLayoutComponent
newWithView:{}
size:{}
style:{
.direction = CKStackLayoutDirectionHorizontal,
.alignItems = CKStackLayoutAlignItemsCenter
}
children:{
{
[CKLabelComponent
newWithLabelAttributes:{
.string = text1,
.font = [UIFont systemFontOfSize:20],
.color = [UIColor blackColor]
}
viewAttributes:{
{@selector(setBackgroundColor:), [UIColor clearColor]}
}],
.alignSelf = CKStackLayoutAlignSelfStretch
},
{
[CKComponent new],
.flexGrow = YES,
},
{
[CKLabelComponent
newWithLabelAttributes:{
.string = text2,
.font = [UIFont systemFontOfSize:20],
.color = [UIColor redColor],
.alignment = NSTextAlignmentRight
}
viewAttributes:{
{@selector(setBackgroundColor:), [UIColor clearColor]}
}],
.alignSelf = CKStackLayoutAlignSelfStretch
}
}]];
}