共计 6900 个字符，预计需要花费 18 分钟才能阅读完成。
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,
),
\],
),
));
}
} 显示成果如下：