如何使用CKStackLayoutComponent水平对齐两个标签?

时间:2015-04-05 17:31:30

标签: componentkit

我刚刚开始玩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
             }
           }]];
}

如果有人有任何建议会非常感激。

1 个答案:

答案 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
             }
           }]];
}