Как использовать CKStackLayoutComponent для выравнивания двух меток по горизонтали?

Question

Я только начал играть с ComponentKit, и у меня возникли трудности с выравниванием двух меток по горизонтали. Я хочу, чтобы первый был ближе к левому краю, а второй - к правому.

С автоматическим расположением я могу сделать это с этим набором ограничений:

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