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

Question

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

如果有人有任何建议，我们将不胜感激。

Answer 1

伟大的发现——这是我们 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
             }
           }]];
}

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

How to use CKStackLayoutComponent to align two labels horizontally?

componentkit