Flutter布局

布局组件

布局类组件就是指直接或间接继承(包含)MultiChildRenderObjectWidget的Widget，它们一般都会有一个children属性用于接收子Widget。

线性布局（Row、Column）

线性布局，即指沿水平或垂直方向排布子组件，将子组件排成一行或一列。

Row

Row可以在水平方向排列其子widget。Row默认只有一行，如果超出屏幕不会折行，会报溢出错误。Row以及Column都是Flex的子类，它们的具体实现也都是由Flex完成，只是参数不同。

属性	类型	默认值	说明
mainAxisAlignment	MainAxisAlignment	MainAxisAlignment.start	水平方向的对齐方式
crossAxisAlignment	CrossAxisAlignment		纵轴方向的对齐方式
mainAxisSize	MainAxisSize	MainAxisSize.max	Row在主轴(水平)方向占用的空间
textDirection	TextDirection		水平方向子组件的布局顺序
verticalDirection	VerticalDirection	VerticalDirection.down	纵轴（垂直）方向的布局顺序
children	List<Widget>		子组件数组
MainAxisAlignment：

center：将children放置在主轴的中心；
end：将children放置在主轴的末尾；
spaceAround：将主轴方向上的空白区域均分，使得children之间的空白区域相等，但是首尾child的空白区域为1/2；
spaceBetween：将主轴方向上的空白区域均分，使得children之间的空白区域相等，首尾child都靠近首尾，没有间隙；
spaceEvenly：将主轴方向上的空白区域均分，使得children之间的空白区域相等，包括首尾child；
start：将children放置在主轴的起点；

CrossAxisAlignment：

baseline：在交叉轴方向，使得children的baseline对齐；
center：children在交叉轴上居中展示；
end：children在交叉轴上末尾展示；
start：children在交叉轴上起点处展示；
stretch：让children填满交叉轴方向；

Column

Column可以在垂直方向排列其子组件，因此和Row的主轴正好相反。

弹性布局（Flex）

弹性布局允许子组件按照一定比例来分配父容器空间。

Flex

其属性和Row，Cloumn的属性差不多。
特有属性：

属性	类型	说明
direction	Axis	必须项，弹性布局的方向, Row默认为水平方向(Axis.horizontal)，默认为垂直方向(Axis.vertical)

Expanded

可以按比例“扩伸” Row、Column和Flex子组件所占用的空间。

属性	类型	说明
flex	number	flex参数为弹性系数，如果为0或null，则child是没有弹性的，即不会被扩伸占用的空间。如果大于0，所有的Expanded按照其flex的比例来分割主轴的全部空闲空间
child	Widget	需要分配的子组件

流式布局（Warp、Flow）

超出屏幕显示范围会自动折行的布局。

Warp

特有属性：

属性	类型	说明
spacing	MainAxisAlignment	主轴方向子widget的间距
runSpacing	CrossAxisAlignment	纵轴方向的间距
runAlignment	MainAxisSize	纵轴方向的对齐方式

Wrap(
  spacing: 8.0, // 主轴(水平)方向间距
  runSpacing: 4.0, // 纵轴（垂直）方向间距
  alignment: WrapAlignment.center, //沿主轴方向居中
  children: <Widget>[
    new Chip(
      avatar: new CircleAvatar(backgroundColor: Colors.blue, child: Text('A')),
      label: new Text('Hamilton'),
    ),
    new Chip(
      avatar: new CircleAvatar(backgroundColor: Colors.blue, child: Text('M')),
      label: new Text('Lafayette'),
    ),
    new Chip(
      avatar: new CircleAvatar(backgroundColor: Colors.blue, child: Text('H')),
      label: new Text('Mulligan'),
    )
  ],
)

Flow

主要用于一些需要自定义布局策略或性能要求较高(如动画中)的场景。缺点是使用复杂并且不能自适应子组件大小，必须通过指定父容器大小或实现TestFlowDelegate的getSize返回固定大小。

层叠布局（Stack、Positioned）

层叠布局和Web中的绝对定位相似，子组件可以根据距父容器四个角的位置来确定自身的位置。绝对定位允许子组件堆叠起来。

Stack

属性	类型	默认值	说明
alignment	AlignmentDirectional	AlignmentDirectional.topStart	如何去对齐没有定位（没有使用Positioned）或部分定位的子组件
fit	StackFit	StackFit.loose	确定没有定位的子组件如何去适应Stack的大小
textDirection	TextDirection	TextDirection.ltr	用于确定alignment对齐的参考系
overflow	Overflow	Overflow.clip	如何显示超出Stack显示空间的子组件
children	List<Widget>		子组件数组

Stack(
    alignment:Alignment.center ,
    children: <Widget>[
      Container(child: Text("Hello world",style: TextStyle(color: Colors.white)),
        color: Colors.red,
      ),
      Positioned(
        left: 18.0,
        child: Text("I am Jack"),
      )
    ],
  ),

Positioned

属性： left, right, top, bottom, width, height, child。示例：

Positioned(
       top: 18.0,
       child: Text("Your friend"),
     )

对齐（Align）

Align 组件可以调整子组件的位置，并且可以根据子组件的宽高来确定自身的的宽高。

属性	类型	说明
alignment	Alignment	表示子组件在父组件中的起始位置
widthFactor	number	组件本身的宽
heightFactor	number	组件本身的高
child		子组件
示例：

Align(
  widthFactor: 2,
  heightFactor: 2,
  alignment: Alignment.topRight,
  child: FlutterLogo(
    size: 60,
  ),
),

参考

《Flutter实战》

Flutter 布局（七）- Row、Column详解