Comment utiliser CKStackLayoutComponent pour aligner horizontalement deux étiquettes?

Question

Je viens de commencer à jouer avec ComponentKit et j'ai quelques difficultés pour aligner 2 étiquettes horizontalement. Je veux le premier près de la marge de gauche et le deuxième près de la droite.

Avec la mise en page automatique, je peux le faire avec cet ensemble de contraintes:

H:|-0-[_label1]-[_label2]-0-|

Tout ce que j'ai essayé ne semble pas fonctionner, je reçois toujours le même résultat: les deux étiquettes alignés à gauche .

C'est le composant super simple:

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

Si quelqu'un a des conseils qui seraient grandement appréciés.

Answer 1

Grande trouvaille-ceci est une lacune dans notre implémentation flexbox (CKStackLayoutComponent). Vous cherchez l'équivalent de justify-content: space-between; mais nous ne le supportons pas encore.

Si vous souhaitez soumettre un correctif à l'implémentation de la disposition de la pile pour le prendre en charge, ce serait très apprécié. Sinon, je vais essayer de trouver quelqu'un pour ajouter du support.

Pour l'instant, vous pouvez simuler en mettant dans une entretoise avec flexGrow = OUI:

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