Как использовать 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 = ДА:

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