如果你的英文很好,自己看官方文档就可以了,更详细：Layout Widgets
我们介绍几个基本布局widget之后，会以“企鹅电竞”这个app的直播tab栏红色区域进行布局编写，最终还会贴出 esports.dart ，本篇文章先开个头，毕竟有参照物才有动力去学习。
如果你有前端/android/IOS 中的一个开发基础,那么应该上手也很快的。
我是android开发，如果你是一名android开发正在阅读这篇文章那么狠幸运，我下面说的你应该都懂。
android平时常用的四大布局:
LinearLayout,RelativeLayout,FrameLayout,GridLayout
下面我们用来对比下在Flutter中用哪些小部件可以达到这四大布局能完成的事情！
一、LinearLayout在android中表示线性布局,它有个重要属性表示方向的，
android:orientation值:horizontal 元素水平摆放 | vertical 元素垂直摆放。
那么在Flutter中用什么代替它呢？
需要注意的是：在Flutter中子控件超过剩余空间，会报错。
Flutter中都是小部件进行组合操作的：
水平排列子元素使用Row小部件，将子控件水平排列。
垂直排列子元素使用Column小部件,将子控件垂直排列。
我们可以点击源码进去看看Row和Column，他们的direction都被写死了方向,
Row的direction=Axis.horizontal，Column的direction=Axis.vertical 。
顺便介绍下：
MainAxisAlignment，MainAxisSize，CrossAxisAlignment 这三枚举类的用法：
MainAxisAlignment和CrossAxisAlignment属性来控制行或列如何对齐其子控件。对于行，主轴水平运行，横轴垂直运行。对于列，主轴垂直运行，横轴水平运行。
MainAxisAlignment & CrossAxisAlignment 和android中的layout_gravity类似,是针对于view相对于父view的位置，就相当于一个button在linearLayout中你可以通过layout_gravity来控制这个按钮在“左边”，”右边”,”中间”。
1.MainAxisAlignment：
start：将多个小部件放置在主轴起点位置附近,（国外有的国家内容是从右往左读的）所以这里不区分左右，只区分起始点和结束点。
end：将多个小部件放置在主轴结束的位置附件。
center：将多个小部件放置在主轴中间。
spaceBetween：将多个小部件均匀分布在空闲的主轴控件中。
spaceAround：可以在每个小部件之间，之前和之后均匀分割空闲的一半空间。
spaceEvenly：可以在每个小部件之间，之前和之后均匀分割空闲的空间。
2.CrossAxisAlignment:
stretch:要求内部小部件填充满横轴。
在Row中mainAxisAlignment控制水平方向对齐，crossAxisAlignment控制垂直方向对齐，而在Column中则正好相反。
3.MainAxisSize:设置主轴方向所占的高度或者宽度。
二、FrameLayout在android中表示帧布局,被FrameLayout包裹的子view会按照顺序叠加在一起
(当然android中RelativeLayout是继承FrameLayout，当然Flutter中多个widget组合一样可以达到原生的效果的)
那么在Flutter中哪个小部件和它一样呢？
Stack用一种简单的方式重叠小部件。
三、GridLayout对应Flutter中Table小部件
我们先来段效果图：
下面我们来试试Table小部件怎么实现,代码如下：
1.我们先构建一个单元格内容部显示文本内容的方法:
///构建一个单元格,下划线表示是私有方法 Widget _buildTableCell(String label,double height){
return new Container(
//单元格内小部件对齐方式 alignment: Alignment.center,
//文本小部件 child: new Text(label,textAlign: TextAlign.center,),
height: height,
);
}2.我们不知道Table这个小部件内部有哪些可以使用的属性,点击源码进去进行了，
初始化入口小部件:
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
return new MaterialApp(
home: new Scaffold(
appBar: new AppBar(
title: new Text('测试Table小部件使用'),
),
body: new Container(
//设置整个容器的边距 padding: const EdgeInsets.all(4.0),
//容器内部小部件对齐方式:居中 alignment: Alignment.center,
//初始化表格小部件，child内显示Table小部件 child:null,
),
),
),
);
}3.下面开始初始化Table小部件,下面的注释很丰富就不多赘述了
new Table(
//设置表格边框,设置其他颜色的话,如果你的单元格"宽高不够"那么会遮挡你单元格内容的 //我在这里就设置透明色了 border: new TableBorder.all(width: 5.0,color: Colors.transparent),
children: <TableRow>[
//初始化一行widget new TableRow(
children: <Widget>[
//在一行中初始化一个单元格 new TableCell(child: _buildTableCell('测试1',40.0)),
new TableCell(child: _buildTableCell('测试2',40.0)),
new TableCell(child: _buildTableCell('测试3',40.0)),
new TableCell(child: _buildTableCell('测试4',40.0)),
new TableCell(child: _buildTableCell('测试5',40.0)),
],
),
new TableRow(
children: <Widget>[
new TableCell(child: new Text('我服1',textAlign: TextAlign.center,)),
new TableCell(child: new Text('我服2',textAlign: TextAlign.center,)),
new TableCell(child: new Text('我服3',textAlign: TextAlign.center,)),
new TableCell(child: new Text('我服4',textAlign: TextAlign.center,)),
new TableCell(child: new Text('我服5',textAlign: TextAlign.center,)),
]
),
],
) 最后贴上完整代码，可能你现在只想自己运行下，满足你们：
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart' show debugPaintSizeEnabled;
void main(){
debugPaintSizeEnabled=true;
runApp(new MyApp());
}
///构建一个单元格,下划线表示是私有方法 Widget _buildTableCell(String label,double height){
return new Container(
//单元格内小部件对齐方式 alignment: Alignment.center,
//文本小部件 child: new Text(label,textAlign: TextAlign.center,),
height: height,
);
}
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
return new MaterialApp(
home: new Scaffold(
appBar: new AppBar(
title: new Text('测试Table小部件使用'),
),
body: new Container(
//设置整个容器的边距 padding: const EdgeInsets.all(4.0),
//容器内部小部件对齐方式:居中 alignment: Alignment.center,
//初始化表格小部件 child: new Table(
//设置表格边框,设置其他颜色的话,如果你的单元格"宽高不够"那么会遮挡你单元格内容的 //我在这里就设置透明色了 border: new TableBorder.all(width: 5.0,color: Colors.transparent),
children: <TableRow>[
//初始化一行widget new TableRow(
children: <Widget>[
//在一行中初始化一个单元格 new TableCell(child: _buildTableCell('测试1',40.0)),
new TableCell(child: _buildTableCell('测试2',40.0)),
new TableCell(child: _buildTableCell('测试3',40.0)),
new TableCell(child: _buildTableCell('测试4',40.0)),
new TableCell(child: _buildTableCell('测试5',40.0)),
],
),
new TableRow(
children: <Widget>[
new TableCell(child: new Text('我服1',textAlign: TextAlign.center,)),
new TableCell(child: new Text('我服2',textAlign: TextAlign.center,)),
new TableCell(child: new Text('我服3',textAlign: TextAlign.center,)),
new TableCell(child: new Text('我服4',textAlign: TextAlign.center,)),
new TableCell(child: new Text('我服5',textAlign: TextAlign.center,)),
]
),
],
),
),
),
);
}
}