今天來學(xué)習(xí)下Flutter的UI布局毒坛。
Flutter 布局的核心機(jī)制是 widgets。在 Flutter 中罢坝，幾乎所有東西都是 widget —— 甚至布局模型都是 widgets鲜滩。你在 Flutter 應(yīng)用程序中看到的圖像，圖標(biāo)和文本都是 widgets鸿市。此外不能直接看到的也是 widgets锯梁，例如用來排列即碗、限制和對齊可見 widgets 的行、列和網(wǎng)格陌凳。
可以通過組合 widgets 來構(gòu)建更復(fù)雜的 widgets 來創(chuàng)建布局拜姿。 如果熟悉SwiftUI或者React 的話可能更好理解這個概念。
當(dāng) widget 的狀態(tài)改變時冯遂，它會重新構(gòu)建其描述（展示的 UI）蕊肥，框架則會對比前后變化的不同，以確定底層渲染樹從一個狀態(tài)轉(zhuǎn)換到下一個狀態(tài)所需的最小更改蛤肌。
基礎(chǔ)Widgets
Text可以用來在應(yīng)用內(nèi)創(chuàng)建帶樣式的文本壁却。
Row, Column
這兩個 flex widgets 可以讓你在水平 (Row) 和垂直(Column) 方向創(chuàng)建靈活的布局。它是基于 web 的 flexbox 布局模型設(shè)計的裸准。
Stack
Stack widget 不是線性（水平或垂直）定位的展东，而是按照繪制順序?qū)?widget 堆疊在一起。你可以用 Positioned widget 作為Stack 的子 widget炒俱，以相對于 Stack 的上盐肃，右，下权悟，左來定位它們砸王。 Stack 是基于 Web 中的絕對位置布局模型設(shè)計的。
Container
Container widget 可以用來創(chuàng)建一個可見的矩形元素峦阁。 Container 可以使用 BoxDecoration 來進(jìn)行裝飾谦铃，如背景，邊框榔昔，或陰影等驹闰。 Container 還可以設(shè)置外邊距、內(nèi)邊距和尺寸的約束條件等撒会。另外嘹朗，Container可以使用矩陣在三維空間進(jìn)行轉(zhuǎn)換。
代碼結(jié)構(gòu)
項目啟動會調(diào)用lib/main.dart文件里的main函數(shù)
void main() {
runApp(const MyApp());
}
runApp() 函數(shù)會持有傳入的 Widget诵肛，并且使它成為 widget 樹中的根節(jié)點屹培。
在寫應(yīng)用的過程中，取決于是否需要管理狀態(tài)曾掂，你通常會創(chuàng)建一個新的組件繼承 StatelessWidget 或 StatefulWidget惫谤。 Widget 的主要工作是實現(xiàn) build() 方法，該方法根據(jù)其它較低級別的 widget 來描述這個 widget珠洗×锿幔框架會逐一構(gòu)建這些 widget，直到最底層的描述 widget 幾何形狀的 RenderObject许蓖。
StatelessWidget
Stateless widgets 是不可變的, 這意味著它們的屬性不能改變——所有的值都是最終的蝴猪。如果無狀態(tài)Widget里面有子Widget调衰，并且子Widget是有狀態(tài)的，則子Widget的內(nèi)容是可以通過setState來更改的自阱。無狀態(tài)Widget影響的僅僅是自己是無狀態(tài)的嚎莉，不回影響他的父Widget和子Widget。
StatefulWidget
Stateful widgets 持有的狀態(tài)可能在widget生命周期中發(fā)生變化沛豌。
Flutter將StatefulWidget設(shè)計成了兩個類：
也就是你創(chuàng)建StatefulWidget時必須創(chuàng)建兩個類：
一個類繼承自StatefulWidget趋箩，作為Widget樹的一部分；
一個類繼承自State加派，用于記錄StatefulWidget會變化的狀態(tài)叫确，并且根據(jù)狀態(tài)的變化，構(gòu)建出新的Widget芍锦；
基本結(jié)構(gòu)如下：
class MyStatefulWidget extends StatefulWidget {
@override
State<StatefulWidget> createState() {
// 將創(chuàng)建的State返回
return MyState();
}
}
class MyState extends State<MyStatefulWidget> {
@override
Widget build(BuildContext context) {
return <構(gòu)建自己的Widget>;
}
}
參考鏈接: https://blog.csdn.net/u011578734/article/details/108834678
http://www.reibang.com/p/da5f8addcf52
