Upgrade to Pro — share decks privately, control downloads, hide ads and more …

flex-box in ComponentKit

X140Yu
January 02, 2018

flex-box in ComponentKit

记录一次公司内部的分享

X140Yu

January 02, 2018
Tweet

More Decks by X140Yu

Other Decks in Programming

Transcript

  1. Table of content • basic flex-box concepts • flex-box in

    ComponentKit • other layout Components
  2. What is flex-box? • a layout mode • flex "->

    flexible • In CK’s world, boxes are components • Defines the relationship between boxes
  3. item a.k.a child struct CKStackLayoutComponentChild { CKComponent *component; CGFloat spacingBefore;

    CGFloat spacingAfter; BOOL flexGrow; BOOL flexShrink; CKRelativeDimension flexBasis; CKStackLayoutAlignSelf alignSelf; };
  4. 1 2 3 struct CKStackLayoutComponentChild { CKComponent *component; CGFloat spacingBefore;

    CGFloat spacingAfter; BOOL flexGrow; BOOL flexShrink; CKRelativeDimension flexBasis; CKStackLayoutAlignSelf alignSelf; }; .direction = .vertical
  5. flexShrink 400 200 100 300 600 100 100 200 .flexShrink

    = true (length - currentLength) / shrinkCount = shrinkLenght per component (400 - 600) / 2 = -100
  6. flexGrow 175 50 175 .flexGrow = true 400 50 250

    100 100 (length - currentLength) / growCount = growLenght per component (400 - 250) / 2 = 75
  7. alignSelf • same as alignItems but for single item •

    cross-axis • default is `auto` • override container’s alignItems property 1 2 3
  8. CKStaticLayoutComponent "// A component that positions children at fixed positions.

    [CKStaticLayoutComponent newWithChildren:{ { .component = yellowComponent, .position = {100, 200}, }, }]; 100 200