Flutter 是 Google 推出的跨平台 UI 框架，能够疾速地在 Android 和 IOS 上构建高质量的应用程序，其次要特点是 Flutter 具备疾速开发的能力、富裕表现力和灵便的 Ui 以及良好的原生性能，本篇文章次要介绍 Flutter 中的 Flex 布局，如下：
- Flex根底
- Flex罕用设置
- Row和Column
- Expanded和Flexible
- Spacer
Flex根底
Flex 布局形式曾经宽泛应用在前端、小程序开发之中，如果之前曾经学习过 Flex 布局，那么在 Flutter 中也是大同小异的，Flexible Box 示意图如下：
Flex Widget 能够设置主轴方向，如果通晓主轴方向，能够间接应用 Row 或者 Column，Flex Widget 不能滚动，如果波及到滚动能够尝试应用 ListView，Flex Widget 的内容超过其宽度和高度，则显示黄黑相间的正告条纹，以程度方向为例呈现的报错信息如下：
I/flutter (14749): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞════════════════════════════════════════════ ═════════════ I/flutter (14749): The following assertion was thrown during layout: I/flutter (14749): A RenderFlex overflowed by 440 pixels on the right. 报错显示如下：
Flex罕用设置
Flex 罕用属性如下：
- direction
- mainAxisAlignment
- mainAxisSize
- crossAxisAlignment
- verticalDirection
- textBaseline
1. direction
设置主轴方向，可设置的值为 Axis.horizontal 和 Axis.vertical，穿插轴与主轴方向垂直。
2. mainAxisAlignment：
设置子 Widget 沿着主轴方向的排列形式，默认 MainAxisAlignment.start，可设置的形式如下：
- MainAxisAlignment.start：左对齐，默认值;
- MainAxisAlignment.end：右对齐;
- MainAxisAlignment.center：居中对齐;
- MainAxisAlignment.spaceBetween：两端对齐;
- MainAxisAlignment.spaceAround：每个 Widget 两侧的距离相等，与屏幕边缘的距离是其余 Widget 之间距离的一半;
- MainAxisAlignment.spaceEvently：均匀散布各个 Widget，与屏幕边缘的距离与其余 Widget 之间的距离相等.
比照成果如下：
3. mainAxisSize
设置主轴的大小，默认 MainAxisSize.max，可设置的值如下：
- MainAxisSize.max：主轴的大小是父容器的大小；
- MainAxisSize.min：主轴的大小是其子 Widget 大小之和。
比照成果如下：
将 mainAxisAlignment 设置成 spaceBetween，如果 mainAxisSize 设置为 max，则是整个 Row 宽度根底上依照 spaceBetween 的形式进行排列，如果 mainAxisSize 设置为 min，则是三个 Container 宽度之和范畴内依照 spaceBetween 的形式进行排列。
4. crossAxisAlignment
设置子 Widget 沿着穿插轴方向的排列形式，默认 CrossAxisAlignment.center，可设置的形式如下：
- CrossAxisAlignment.start：与穿插轴的起始地位对齐；
- CrossAxisAlignment.end：与穿插轴的完结地位对齐；
- CrossAxisAlignment.center：居中对齐；
- CrossAxisAlignment.stretch：填充整个穿插轴；
- CrossAxisAlignment.baseline：依照第一行文字基线对齐。
比照成果如下：
5. verticalDirection
设置垂直方向上的子 Widget 的排列程序，默认为 VerticalDirection.down，设置形式如下：
- VerticalDirection.down：start 在顶部，end 在底部；
- VerticalDirection.up：start 在底部，end 在顶部。
比照成果如下：
留神察看穿插轴设置的 CrossAxisAlignment.end，在此基础上垂直方向上的变动。
6. textBaseline
设置文字对齐的基线类型，可设置的值如下：
- TextBaseline.alphabetic：与字母基线对齐；
- TextBaseline.ideographic：与表意字符基线对齐；
应用时当 crossAxisAlignment 设置为 baseline 时，必须设置 textBaseline 属性的值，应用形式如下：
// textBaseline class FlexSamplePage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("Flex Sample"), centerTitle: true, ), body: Row( children: <Widget>\[ Expanded( child: Row( children: <Widget>\[ Text("躬",style: TextStyle(fontSize: 40,),), Text("x",style: TextStyle(fontSize: 60,),), Text("ing",style: TextStyle(fontSize: 16,),), Text("之",style: TextStyle(fontSize: 16,),), \], )), Expanded( child: Row( crossAxisAlignment: CrossAxisAlignment.baseline, textBaseline: TextBaseline.alphabetic, children: <Widget>\[ Text("躬",style: TextStyle(fontSize: 40,),), Text("x",style: TextStyle(fontSize: 60,),), Text("ing",style: TextStyle(fontSize: 16,),), Text("之",style: TextStyle(fontSize: 16, ),), \], )), Expanded( child: Row( crossAxisAlignment: CrossAxisAlignment.baseline, textBaseline: TextBaseline.ideographic, children: <Widget>\[ Text("躬",style: TextStyle(fontSize: 40, ),), Text("x",style: TextStyle(fontSize: 60,),), Text("ing",style: TextStyle(fontSize: 16,),), Text("之",style: TextStyle(fontSize: 16,),), \], )) \], ), ); } } 别离为不设置 textBaseline 属性、设置 TextBaseline.alphabetic 和 TextBaseline.ideographic，比照成果如下：
两者尽管在对应基线含意上有所不同，然而测试没发现不同，前期持续注意察看，晓得的敌人能够评论指出。
Row和Column
Row 和 Column 都继承 Flex，Row 主轴的方向为程度方向，Column 主轴的方向为竖直方向，即在 Flex 根底上设置了主轴方向 direction，如下：
// Row direction: Axis.horizontal, /// Column direction: Axis.vertical, 如果确定主轴方向，能够间接应用 Row 或者 Column，应用形式和 Flex 统一。
Expanded和Flexible
Flexible 的 fix 属性默认为 FlexFit.loose，而 Expanded 继承 Flexible，其 fix 属性指定为 FlexFit.tight，两者因为其 fix 属性不必而不同，若将 Flexible 的 fit 属性设置为 FlexFit.tight，则 Flexible 与 Expanded 等效，可设置的 fit 属性如下：
- tight：强制填充可利用的空间；
- loose：不强制填充可利用空间，Widget本身大小。
比照成果如下：
Expanded 能够使 Row、Column、Flex 外面的组件填充沿着主轴可利用的空间，如果多个 Widget 都应用了 Expanded 组件，能够应用 Expanded 的 flex 属性依照比例调配主轴空间，flex 属性相当于 Android LinearLayout 的 weight 属性，如下：
// Expanded class ExpandedSamplePage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("Row Sample"), centerTitle: true, ), body: Row( mainAxisAlignment: MainAxisAlignment.start, mainAxisSize: MainAxisSize.max, children: <Widget>\[ Expanded( flex: 1, child: Container( width: 50, height: 50, color: Colors.red, child: Center( child: Text( "A", style: TextStyle(fontSize: 20, color: Colors.white), ), )), ), Expanded( flex: 2, child: Container( width: 50, // Row Expanded下width有效 height: 50, // Column Expanded下height有效 color: Colors.green, child: Center( child: Text( "B", style: TextStyle(fontSize: 20, color: Colors.white), ), )), ), Container( width: 50, height: 50, color: Colors.yellow, child: Center( child: Text( "C", style: TextStyle(fontSize: 20, color: Colors.white), ), )), \], )); } } 显示成果如下：
Spacer
Spacer 用来调节 Widget 之间的间距，会占据所有的残余空间，因而 MainAxisAlignment 的设置将有效，Spacer 的属性 flex 用于设置残余空间的调配权重，默认值为 1，示意占据所有残余空间，如果两个以上 Spacer 则依照 flex 调配残余空间，代码参考如下：
class RowSamplePage1 extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("Row Sample"), centerTitle: true, ), body: ConstrainedBox( constraints: BoxConstraints(maxHeight: 150), child: Row( children: <Widget>\[ Container( width: 80, height: 80, color: Colors.red, ), Spacer(flex: 1,), Container( width: 80, height: 80, color: Colors.green, ), Spacer(flex: 2,), Container( width: 80, height: 80, color: Colors.yellow, ), \], ), )); } } 显示成果如下：