最近在學習Flutter姆另，在這里把學的的一些記錄記下來，當做是自己的筆記吧坟乾；
Flutter 是谷歌的移動UI框架迹辐，可以快速的再iOS和Android上構建高質(zhì)量的原生用戶界面。Flutter可以與現(xiàn)有的代碼一起工作甚侣；而且隨著Flutter的成熟被越來越多的開發(fā)者和公司所接受明吩，而且Flutter是完全免費、開源的殷费；
Flutter的布局
Flutter引用了大量的Web開發(fā)知識印荔，比如FlexBox布局方式，盒模型等详羡，這些引用了CSS的一些思想仍律。所以從UI界面的實現(xiàn)角度來說，只要對Web的布局有些了解殷绍，加上對Dart語言熟悉就能輕松的上手Flutter的布局代碼編寫染苛；
下表示布局時所用到的組件以及裝飾組件的說明
| 組件名稱 | 中文名稱 | 簡單說明 |
|---|---|---|
| Align | 對齊布局 | 指定child的對齊方式 |
| AspectRatio | 調(diào)整寬高比 | 根據(jù)設定的寬高比調(diào)整child |
| Baseline | 基準線布局 | 所有child所在的同意條水平線 |
| Center | 居中布局 | child處于水平和垂直方向的中間位置 |
| Column | 垂直布局 | 對child在垂直方向進行排列 |
| ConstrainedBox | 限定寬高 | 限定child的最大值 |
| Container | 容器布局 | 容器布局是一個組合的widget鹊漠，包含定位和尺寸 |
| FittedBox | 縮放布局 | 縮放以及位置調(diào)整 |
| FractionllySizedBox | 百分比布局 | 根據(jù)現(xiàn)有的空間按照百分比調(diào)整child的尺寸 |
| GridView | 網(wǎng)絡布局 | 對多行多列同時進行布局 |
| IndexedStack | 棧索引布局 | IndexedStack繼承自Stack主到，顯示第index個child，其他child都是不可見的 |
| LimitedBox | 限定寬高布局 | 對最大寬高進行限制 |
| ListView | 列表布局 | 用列表方式進行布局躯概，比如多項數(shù)據(jù)的場景 |
| Offstage | 開關布局 | 控制是否顯示組件 |
| OverflowBox | 溢出父容器顯示 | 允許child超出父容器的范圍顯示 |
| Padding | 填充布局 | 處理容器與child之間的間距 |
| Row | 水平布局 | 對child在水平方向進行排列 |
| SizedBox | 設置具體尺寸 | 用一個特定大小的盒子來限定child的寬度和高度 |
| Stack/Alignment | Alignment棧布局 | 根據(jù)Alignment組件的屬性將child定位在Stack組件上 |
| Stack/Positioned | Positioned棧布局 | 根據(jù)Positioned組件的屬性將child定位在Stack組件上 |
| Table | 表格布局 | 使用表格的行和列進行布局 |
| Transform | 矩陣轉(zhuǎn)換 | 做矩陣變換登钥，對child做評議、旋轉(zhuǎn)娶靡、縮放等操作 |
| Wrap | 按寬高自動換行 | 按寬度或者高度牧牢，讓child自動換行布局 |
下面我就記錄一下幾種比較常用的布局方式：Row、Column、Stack塔鳍；
Row --- 水平布局
水平布局是一種常用的布局方式伯铣，主要Row組件來實現(xiàn)子組件在水平方向的排列，其中常見的屬性如下：
- mainAxisAlignment： 其類型是MainAxisAlignment轮纫，是主軸的排列方式腔寡；
- crossAxisAlignment： 其類型是CrossAxisAlignment, 次軸的排列方式；
- mainAxisSize： 其類型是MainAxisSize掌唾，主軸應該占據(jù)多少空間放前。取值max為最大，min為最信幢颉凭语；
- children： 其類型是元素為widget的List類型，組件子元素撩扒，她的本質(zhì)是一個List列表似扔；
對于Row來說，水平方向是主軸搓谆，垂直方向是次軸虫几，如圖
Row
Column --- 垂直布局
垂直布局也是一種常用的布局方式，與Row組件的區(qū)別在于Column組件主要是用來實現(xiàn)子組件在垂直方向的排列挽拔，垂直方向為主軸辆脸，水平方向為次軸，其常見屬性與Row一樣螃诅，示例圖為：
Colunm
Stack --- 層級布局
Stack組件的每一個組件要么定位要么不定位啡氢，定位的子組件是用Positioned組件包裹的。Stack組件本身包含所有不定位的子組件术裸，子組件根據(jù)alignment屬性定位（默認為左上角）倘是。然后根據(jù)定位的子組件的top、right袭艺、bottom和left屬性將它們放置在Stack組件上搀崭，Stack的主要屬性如下：
- alignment : 類型（AlignmentGeometry），默認值是Alignment.topLeft,其定位位置有一下幾種：
- bootomCenter:底部中間位置猾编。
- bootomLeft：底部左側(cè)位置瘤睹。
- bootomRight:底部右側(cè)位置。
- center:正中間位置答倡。
- centerLeft:中間居左位置轰传。
- centerRight:中間居右位置。
- topCenter:上部居中位置瘪撇。
- topLeft:上部居左位置获茬。
- topRight:上部居右位置港庄。
