Introduction
Fower 提供了一个强大的基于 Flexbox 的布局工具,通过调整布局的方向(Direction)和对齐(Alignment),可以实现大部分的布局,使布局工作更轻松。
相比传统的 flex 布局,Fower 的布局更加抽象精简,Fower 的布局抽象为 toCenter
、toCenterX
、toCenterY
、toLeft
、toTop
、toRight
、toBottom
、toBetween
、toEvenly
、toAround
十种原子对齐方式,使用时你可以忘记传统 flex 布局中的主轴(main axis)和交叉轴(cross axis)的概念,你只需要有方向感即可。
#
和 Flexbox 对比Fower Layout 基于 Flexbox ,与 Flexbox 相比,它具有以下优点:
Less API :您不必记住 Flexbox 的所有 API,只需记住 10 个原子属性:
toCenter
,toCenterX
,toCenterY
,toLeft
,toTop
,toRight
,toBottom
,toBetween
,toEvenly
,toAround
。Easy to learn: 更直观,心智负担更低。 无需了解主轴和交叉轴。
#
核心概念布局方向:row、column
。
布局对齐:toCenter、toCenterX、toCenterY、toLeft、toTop、toRight、toBottom
、toBetween
、toEvenly
、toAround
。
#
Live DemoSyntaxError: Unexpected token (1:8) 1 : return () ^
#
Layout base on rowAll Alignment Props with row direction:
#
Layout base on columnAll Alignment Props with column direction:
#
Compose base on toLeftAll Layout compose with toLeft:
#
Compose base on toRightAll Layout compose with toRight:
#
Compose base on toTopAll Layout compose with toTop:
#
Compose base on toBottomAll Layout compose with toBottom:
#
Compose base on toCenterXAll Layout compose with toCenterX:
#
Compose base on toCenterYAll Layout compose with toCenterY:
#
Compose base on toBetweenAll Layout compose with toBetween:
#
Compose base on toEvenlyAll Layout compose with toEvenly:
#
Compose base on toAroundAll Layout compose with toAround: