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（右圖）中的最終布局直接對應以下偽代碼：