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

在 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 源碼到過程當中會常常看到根據不一樣的平臺作不一樣處理的狀況。

交流

老孟Flutter博客地址（330個控件用法）：http://laomengit.com

歡迎加入Flutter交流羣（微信：laomengit）、關注公衆號【老孟Flutter】：