Flutter 中那麼多組件，難道要都學一遍？其他頭條網

歷史上的今天

通古斯因隕星墜落髮生大爆炸，1908年6月30日上午7時，在中西伯利亞上空，一個雪亮的火球從東南向西北掠空而過。一個幾十萬噸重的大流星落在通古斯河以北。從葉尼塞河至勒拿河之間1500公里的範圍都曾看見，爆炸聲在直徑為2000公里範圍可聽到，世界各地的地震儀都有地震波記錄下來。

流星降落的頭幾夜，天光明亮，在高加索不用點燈即可看報。像通古斯這樣的巨型隕星，迄今發現的只有10個，其中最大的兩個均落在西伯利亞。另一個於1947年2月12日上午11時，落在海參崴附近的老爺嶺山脈，故稱老爺嶺隕星。通古斯卡隕星以每秒60公里的速度向地球迎面衝擊。由於速度太快，在空中都燒燬了，地面上難以找到它的碎片。

正文

在 Flutter 中一切皆是組件，僅僅 Widget 的子類和間接子類就有 350 多個，整理的

Flutter組件繼承關係圖（文末有地址）可以幫助大家更好的理解學習 Flutter，迴歸正題，如此多的組件到底如何學習，真的需要學習 350 多個組件？

在經濟學中有一個著名的定律 二八定律

二八定律是意大利經濟學家帕累託發現的。帕累託認為任何一組東西中最重要的只佔其中一小部分約佔20%，其餘80%儘管是多數，卻是次要的。

學習 Flutter 也同樣適用於二八定律，大部分組件是平時很少用到的，因此作為初學者，只需學習那 20% 常用的組件即可，常用的組件及案例地址：http://laomengit.com/guide/introduction/mobile_system.html

除了常用組件外，還總結了300多個其餘組件的詳細用法，這些組件可以作為手冊，需要的時候再查閱即可，地址：http://laomengit.com/flutter/widgets/widgets_structure.html

組件樹

Flutter 創建App的時候，所有的組件最後會生成一個組件樹，例如如下代碼：

<code>void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
      ),
      home: Scaffold(
        body: Text('老孟'),
      ),
    );
  }
}/<code>

main 函數是應用程序開始的地方，運行 MyApp 組件。生成的組件樹如下：

讓 Text 組件居中，修改如下：

<code>Scaffold(
  body: Center(
    child: Text('老孟'),
  ),
)/<code>

生成的組件樹如下：

給應用程序添加 AppBar：

<code>Scaffold( 

  appBar: AppBar(),
  body: Center(
    child: Text('老孟'),
  ),
)/<code>

生成的組件樹如下：

Stateful vs Stateless

Flutter 中組件分為 無狀態組件（StatelessWidget） 和 有狀態組件（StatefulWidget）

兩種。它們唯一的區別就是運行時 重新加載 組件的方式不同，StatelessWidget 組件重新加載時重新創建當前組件的實例，而StatefulWidget組件重新加載時不會重新創建實例，而是重新執行 build 函數。

StatelessWidget 組件創建的方式：

<code>class StatelessWidgetDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}/<code>

build 函數返回當前組件，此組件一旦創建將不可改變，build 函數只能執行一次。如果想重新繪製此組件，只能重新創建此組件新的實例。

StatefulWidget 組件創建的方式：

<code>class StatefulWidgetDemo extends StatefulWidget {
  @override
  _StatefulWidgetDemoState createState() => _StatefulWidgetDemoState();
}

class _StatefulWidgetDemoState extends State<StatefulWidgetDemo> {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}/<code>

StatefulWidget 組件的創建方式和 StatelessWidget 不同，

State<> 中的 build 函數返回當前組件，有狀態的組件可以在其生命週期內多次重繪，即多次調用 build 函數，而不是創建一個新的實例。

StatefulWidget 組件重繪需要調用 setstate 方法，setState 會使其自身及其子組件重繪，所以儘量封裝 StatefulWidget 組件，避免無效的重建和重繪，影響性能。

快速書寫小技巧：在 Android Studio 和 VS Code 中輸入 stl 然後點擊回車，可以快速創建 StatelessWidget 組件，同理輸入 stf 點擊回車，可以快速創建 StatefulWidget 組件，這是編輯器 Live Templates 的功能。

Material vs Cupertino

Flutter 中包含兩套風格的組件，分別是 Material 和 Cupertino ，Cupertino 是 iOS風格的組件，命名都帶 Cupertino 前綴，比如 CupertinoSlider 、 CupertinoDatePicker 等， Material Design 是由 Google 推出，旨在為手機、平板電腦、臺式機和“其他平臺”提供更一致、更廣泛的“外觀和感覺”。

Flutter 使用一套代碼在不同的平臺上表現一致，它不會根據不同的平臺繪製不同的外形，比如使用 AlertDialog 彈出警告框，不管在 Android 上，還是在 iOS上效果是一樣。

但有一些功能 Flutter 區分平臺，比如 ListView 滑動到底部時繼續滑動，Android 底部會出現淡藍色（默認情況下）拱形，而 iOS 上則沒有，這是因為 Flutter 在封裝此組件時在代碼中區分了平臺，所以在查看 Flutter 源碼到過程中會經常看到根據不同的平臺做不同處理的情況。

Flutter組件繼承關係圖地址：http://laomengit.com/flutter/widgets/widgets_structure.html