2

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

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

4

1 回答 1

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
             }
           }]];
}
于 2015-04-05T18:00:33.650 回答