Flutter布局Overview ｜ 第133期

       对UI设计来说，布局 是指摆放控件的方式，比如是横着放还是竖着放。开发应用程序时就需要提前构思大体的布局，然后选择合适的布局组件组合实现需求。Flutter 提供了很多内置的布局组件，大体上分为三类：单个子元素、多个子元素以及sliver布局等。我们来一览大部分常用布局组件的实验效果，在选取合适的组件时就可以派上用处。

单元素布局

       单元素布局组件只包含一个 child 控件，缺乏组合的可能性，因此更多的还是设置属性，比如，大小、位置、颜色等等。

Align 布局就是设置子元素对齐方式的，也就是指定子元素在父元素空间中的位置，效果如下图。

      由于对齐方式也可以通过某些控件的属性来设置，并且使用属性设置更容易在变量中控制，因此，Align 在实际中使用得并不多。

AspectRatio 布局可以设置控件区域的长宽比，在视频或图片的显示中比较常用，效果如下图。

ConstrainedBox 布局可以为子元素添加一些约束信息，比如最小的高度等等，下图中的效果就是让子元素充满父元素。

Container 大概是最常用的布局组件，相当于 HTML 中的 div 标签，常用于包裹组件或者直接用于显示一块区域，同时提供属性控制。比如下图就是设置一个区域颜色的效果。

Expanded 用于在某些多子元素的布局中让某个子元素尽可能填充可用空间。如果有多个子元素都使用 Expanded 就会在他们之间划分可用空间。比如在列布局中的效果如下图，中间的子元素就会根据父元素纵轴大小自适应填充。

FittedBox 布局可以根据填充方式放大和移动子元素，通常用于图片的显示，效果如下图。

FractionallySizedBox 布局可以使用分数(小数)设置区域的大小，也就可以根据可用空间的百分比来显示控件。下图展示的效果就是子控件以固定比例适应不同大小的屏幕。

Offstage 布局用于通过属性控制子元素是否可视。对于需要在某种时机下才显示或者隐藏的组件，可以使用这个布局实现。下图中左边的就是隐藏，点击按钮之后，就是右边的显示出来。

Padding 布局用于设置内边距后在嵌入子元素。一般内边距可以通过空间的属性实现，因此，使用这个布局来控制内边距的情况并不是太多。下图展示了为文字内容添加边距的效果。

SizedBox 布局使用像素值设置区域的大小。也就是说，无论屏幕分辨率的高低，都会显示固定像素大小。下图展示了这种效果。

Transform 布局对子元素进行坐标变换之后再进行绘制。比如下图就是一种粗糙的变换效果。

多元素布局

         多元素布局组件包含多个子元素，因此更多地是指控制摆放子元素的方式。

Column 布局按照一列的方式摆放子元素，是常用的布局组件之一，简单的列布局效果如下图所示，不要求控件类型一致。

CustomMultiChildLayout 布局可以使用代理配置子元素的大小和位置，可以实现更多复杂的子元素摆放方式。下图展示了一种摆放效果。

Flow 布局实现流布局算法，可以通过代理设置多种常用流布局效果。下图展示了一种折叠菜单的例子。

GridView 布局按照2维网格的方式摆放子元素，是很多 App 中常见的一种布局，效果如下图所示。

IndexedStack 布局按照索引显示多层子元素中的指定层，常用于在同一区域通过切换显示多个内容。下图展示一种应用效果。

LayoutBuilder 布局可以根据父元素的大小显示不同的自定义子元素。下图中的代码描述了一种约束方式。

ListView 布局是按照一维线性列表的方式来摆放子元素，可以横着摆放，也可以竖着摆放，比如下图就是竖着摆放效果。在实际开发中经常会用到这个布局，有时可能会有一些列表样式的定制需求，比如添加分割线等，一部分可以使用内置的其他构造器解决，比较奇特的也可以自行定制。

Row 布局按照一行的方式摆放子元素，与 Column 布局互补，都是使用频率非常高的组件。 下图展示两个文字和一个图标放在一行的效果。

Stack 布局将多层子元素叠加显示，下图展示了三个不透明的矩形方块叠加显示的效果。如果给顶层的元素加上半透明的背景，下一层的内容就能在一定程度可视。

Table 布局可以按照表格的方式摆放子元素。这种方式太复杂，据说运行时的性能比较差，一般不使用。下图简单展示一下官方例子的效果。

sliver布局

       sliver布局是指将一些子元素组合起来滚动显示，有时表现出动态效果，比如下图中的标题栏在上滑操作之后收缩过渡到另一种状态或者最小化。

      官方提供了一些sliver布局的组件，比如 CustomScrollView，SliverList，这两个加起来的效果与 ListView 是一样的。

       还有一种比较有意思的sliver布局是 SliverAppBar，在滑动页面时，标题栏内容有过渡变化，在很多IOS应用中常看到类似效果，下图展示一个官方例子。

总结

       用尽量简单的方式满足UI设计需求是一种可取的态度。如果自己设计UI，最好不要堆砌太多不同类型的布局，因为这样会导致混乱。很多大厂的应用都有这个毛病，似乎是在炫耀技巧，这一点都不可取，特别是当功能本身没那么复杂的时候。

完整示例的代码链接：https://github.com/jielyu/flutter_demos/tree/master/d0021_layout