如何使用CKStackLayoutComponent水平對齊兩個標籤？

我剛開始玩ComponentKit，我在水平對齊2個標籤時遇到了一些困難。我希望第一個靠近左邊距，第二個靠近右邊。如何使用CKStackLayoutComponent水平對齊兩個標籤？

隨着汽車的佈局，我可以用這組約束做到這一點：

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

如果任何人有這將不勝感激任何意見。

來源

2015-04-05 Adam Ernst

信用這個問題馬可波羅血清，誰張貼它最初的位置：https://github.com/facebook/componentkit /問題/ 62 – 2015-04-05 18:00:56

偉大的發現 - 這是我們的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-05 18:00:33

如何使用CKStackLayoutComponent水平對齊兩個標籤？

回答

相關問題