Flutter布局分析

实际使用

由于篇幅有限，常见现象和解决办法：

1.如果Row里面嵌套Row，或者Column里面再嵌套Column，那么只有对最外面的Row或Column会占用尽可能大的空间，里面Row或Column所占用的空间为实际大小，如果要让里面的Colum或Row占满外部Colum或Row，可以使用Expanded widget
2.如果使用Column发现超范围，可用SingleChildScrollView包裹，scrollDirection属性设置滑动方向
3.使用Column嵌套ListView/GridView的时候，会报异常信息【Viewports expand in the scrolling direction to fill their container…】，这种情况flutter已给出解决办法，将ListView/GridView的 shrinkWrap属性设为true
4.有的时候修改Row/Column的verticalDirection会得到很好的效果，比如需要页面在底部需要几个按键，也可以用Stack来布局，但是相对麻烦，而且有时还需要知道控件的大小，没有verticalDirection方便。

弹性布局

弹性布局允许子widget按照一定比例来分配父容器空间，弹性布局的概念在其UI系统中也都存在，如H5中的弹性盒子布局，Android中的FlexboxLayout。Flutter中的弹性布局主要通过Flex和Expanded来配合实现。

Flex

Flex可以沿着水平或垂直方向排列子widget，如果你知道主轴方向，使用Row或Column会方便一些，因为Row和Column都继承自Flex，参数基本相同，所以能使用Flex的地方一定可以使用Row或Column。Flex本身功能是很强大的，它也可以和Expanded配合实现弹性布局，接下来我们只讨论Flex和弹性布局相关的属性(其它属性已经在介绍Row和Column时介绍过了)。

Flex({
…
@required this.direction, //弹性布局的方向, Row默认为水平方向，Column默认为垂直方向
List children = const [],
})

Flex继承自MultiChildRenderObjectWidget，对应的RenderObject为RenderFlex，RenderFlex中实现了其布局算法。

Expanded

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

const Expanded({
int flex = 1,
@required Widget child,
})

flex为弹性系数，如果为0或null，则child是没有弹性的，即不会被扩伸占用的空间。如果大于0，所有的Expanded按照其flex的比例来分割主轴的全部空闲空间。下面我们看一个例子：

class _home extends StatefulWidget{
@override
State createState() {
// TODO: implement createState
return _homeState();
}
}
class _homeState extends State<_home>{
@override
Widget build(BuildContext context) {
// TODO: implement build
return new Scaffold(
appBar: new AppBar(
title: new Text(“title”),
centerTitle: true,
),
body: _body(),
);
}
}

Widget _body(){
return Column(
children: [
//Flex的两个子widget按1：2来占据水平空间
Flex(