1.2　如何拆分布局

生活中看似复杂的排版与布局通常是由相对简单的小模块组合而成的。例如图1-10（左图）这篇新闻概要的布局，可以大致拆分为图片、分割线、日期、间隔留白、标题、正文共6个模块，拆分结果如图1-10（右图）所示。

图1-10　一篇新闻概要可被拆分成6个模块

仔细观察不难发现，这6个模块从整体可以分为垂直排列的3组模块。如图1-11所示，由上到下，图片为第1组，分割线为第2组，而下面的日期、间隔留白、标题和正文，由于相互之间是水平方向排列的，在垂直方向只能统一归纳为第3组。

而图1-11中的相对复杂的第3组，虽然自身包括日期、间隔留白、标题和正文这4个模块，但由于最后2块（标题和正文）又是垂直方向排列的，因此水平方向只能继续拆成3组，分别为日期、间隔留白、标题与正文。

图1-11　细分的模块可被垂直拆分为3组

为了方便说明，这里将新闻概要的6个模块分别标注字母A~F，如图1-12（左图）所示。在布局时，这6个模块可被看作垂直方向排列3个模块（A、B、其他），其中第3个模块自身又嵌套了水平方向排列的3个模块（C、D、其他），而最终它的第3个模块又由垂直排列的2个模块（E、F）拼成。模块的布局和嵌套关系如图1-12所示。

图1-12　新闻概要的6个模块和最终布局的对应关系

这样拆分布局，化繁为简的思路非常有用。通过建立和渲染一个个相对独立的小模块，再把小模块按照一定的布局方式排列与摆放，最终可构造出非常复杂且华丽的用户界面。

在Flutter里，Column组件可以帮助开发者垂直排列多个子组件，而Row组件则可用于水平方向排列，因此，图1-12（右图）中的最终布局直接对应以下伪代码：