Flutter 中那麼多元件，難道要都學一遍？

阿新 • • 發佈：2020-06-30

在 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的時候，所有的元件最後會生成一個元件樹，例如如下程式碼：

void main() {

  runApp(MyApp());

}

class MyApp extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return MaterialApp(
 

      title: 'Flutter Demo',

      theme: ThemeData(

      ),

      home: Scaffold(

        body: Text('老孟'),

      ),

    );

  }

}

main 函式是應用程式開始的地方，執行 MyApp 元件。生成的元件樹如下：

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

Scaffold(

  body: Center(

    child: Text('老孟'),

  ),

)

生成的元件樹如下：

給應用程式新增 AppBar：

Scaffold(

  appBar: AppBar(),
 

  body: Center(

    child: Text('老孟'),

  ),

)

生成的元件樹如下：

StatefulWidget vs StatelessWidget

Flutter 中元件分為 無狀態元件（StatelessWidget） 和 有狀態元件（StatefulWidget）兩種。它們唯一的區別就是執行時 重新載入 元件的方式不同，StatelessWidget 元件重新載入時重新建立當前元件的例項，而StatefulWidget元件重新載入時不會重新建立例項，而是重新執行 build 函式。

StatelessWidget 元件建立的方式：

class StatelessWidgetDemo extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return Container();

  }

}

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

StatefulWidget 元件建立的方式：

class StatefulWidgetDemo extends StatefulWidget {

  @override

  _StatefulWidgetDemoState createState() => _StatefulWidgetDemoState();

}

class _StatefulWidgetDemoState extends State<StatefulWidgetDemo> {

  @override

  Widget build(BuildContext context) {

    return Container();

  }

}

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 原始碼到過程中會經常看到根據不同的平臺做不同處理的情況。