Flutter的布局

根據最近的開發經驗，對Flutter的布局有了如下的了解。

在Flutter中，widget由其底層的RenderBox對象渲染。 渲染框由它們的父級給出限制，并且在這些限制下調整自身大小。限制由最小寬度、最大寬度和高度組成; 尺寸由特定的寬度和高度組成。

通常，按照widget如何處理他們的限制來看，有三種類型的盒子：

• 盡可能大。 例如 Center 和 ListView 的渲染盒
• 跟随子widget大小。 例如, Transform 和 Opacity 的渲染盒。
• 指定尺寸。 例如, Image 和 Text的渲染盒

比較常用的Container預設是盡可能大的占用空間， 但是如果你給它指定一個width，那它就會采用指定的值。

Row和Column 都是Flex彈性盒，根據外部的限制來決定寬度或者高度。

Row和Column都擁有children屬性，也就是它們可以擁有多個子元件。

相對來說，Container和Center都隻能有一個子元件。

Row是水準方向上的布局，而Column是垂直方向上的。

下面就以Row為例進行說明，

Row的寬度等于所有水準排列子元件的寬度總和，但是如果寬度超出了螢幕寬度，會抛出overflow 螢幕溢出異常，可以使用 Expanded、Wrap 元件自動換行，或使用可滑動元件。Row的高度為最高的那個元件高度。

在垂直方向上，通過crossAxisAlignment來控制布局，有start end center stretch四個選擇。

在水準方向上，則是通過mainAxisAlignment，有start end center spaceBetween spaceAround spaceEvenly等選項。

Column的使用相對來說就簡單一些。

目前我所用到的布局主要就是這幾個。