距離Google發布Flutter已經有很長一段時間了，又是一門新的技術，那么我們到底是學呢還是學呢還是學呢？不要問我，我不知道，鬼特么知道我這輩子還要學習多少東西。其實新技術的出現也意味著，老技術會面臨淘汰危機，而你將面臨著失業危機。用一句話來說：你永遠不知道意外和驚喜哪個先來~~

環境搭建

Flutter的安裝就不在這里演示了，可以從下面幾個網站上學習安裝。

• Flutter官網
• Flutter中文網
• Flutter社區

這些網站也通過豐富的Flutter學習資料

Flutter的第一個應用

在創建一個Flutter應用后，我們可以看到如下的demo代碼。（其中注釋是個人翻譯，如有不正確請諒解）

import 'package:flutter/material.dart';//應用啟動 void main() => runApp(MyApp());class MyApp extends StatelessWidget {// 這個App的根Widget@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Flutter Demo', //應用名theme: ThemeData(// 這個應用的主題//// 你用 "flutter run"運行這個應用，你將看到一個藍色的ToolBar。// 你也可以改變下面primarySwatch 的值，從Colors.blue變成 Colors.green。// 然后執行 "hot reload" ，可以看到計數器并沒有恢復初始狀態0，這個應用也并沒有重啟。primarySwatch: Colors.blue,),home: MyHomePage(title: 'Flutter Demo Home Page'),);} }class MyHomePage extends StatefulWidget {MyHomePage({Key key, this.title}) : super(key: key);// 我們可以知道這個MyHomePage 的 widget 是這個應用的首頁，而且它是有狀態的，//這就意味著下面定義的State對象中的字段能夠影響應用的顯示。//這個類是這個狀態的配置類，它所持有的這個title值是其父類提供的，//被創建狀態的方法使用，在Widget的子類中總是被標記為“final”final String title;@override_MyHomePageState createState() => _MyHomePageState(); }class _MyHomePageState extends State<MyHomePage> {int _counter = 0;void _incrementCounter() {setState(() {// 回調setState去告訴Flutter framework 已經有一些狀態發生了改變，// 讓下面這個返回Widget的build方法去展示更新的內容。當然，如果我們沒有回調// 這個setState，那么build方法也不會被調用，也就不會有什么更新展示。_counter++;});}@overrideWidget build(BuildContext context) {// 這個方法在每次setState的時候被調用，例如上面的_incrementCounter方法。//// Flutter framework 是被優化過的，所以它的重新運行build方法是非常快速的，只需要// 運行你需要更新的內容，不需要去分別所有的widgets的實例。return Scaffold(appBar: AppBar(// 我們能夠使用在App.build方法中創建的值，并且賦值// Here we take the value from the MyHomePage object that was created by// the App.build method, and use it to set our appbar title.title: Text(widget.title),),body: Center(// Center是一個布局Widget，它提供一個child 并且規定了只能居于父類的正中心child: Column(// Column 也是一個布局Widget，它有一系列的子布局并且這些子布局都是垂直方向的。// 默認情況下，Column會調整它自己的大小去適應子級的橫向大小。//// 調用 "debug painting"可以看每一個widget的線框//// Column 有大量的屬性去控制自己的大小和它子級的位置，這里使用了mainAxisAlignment// 讓其子布局內容是垂直方向排列。mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[Text('You have pushed the button this many times:',),Text('$_counter',style: Theme.of(context).textTheme.display1,),],),),floatingActionButton: FloatingActionButton(onPressed: _incrementCounter,tooltip: 'Increment',child: Icon(Icons.add),), // This trailing comma makes auto-formatting nicer for build methods.);} }復制代碼

運行Flutter

我使用的是Android Studio 創建的Flutter應用，可以看到如下所示的編譯界面

• 點擊Run （就是那個綠色的三角）之后我們可以看到如下運行結果：

• 點擊藍色的“+”號我們可以看到，中間的數字一直在增加，所以demo給我的是一個簡單計數器的實現

Demo分析

我們從官網知道Flutter是用Dart語言進行編碼的，我們是不是需要單獨去學習掌握這門語言呢？在我看來是不需要的，因為單獨去學習一門新的語言的過程是很枯燥的，我們可以從Demo中去學習，這樣更高效一些。所以我們來分析一下上述例子給了我們一個怎樣的知識點。

import 'package:flutter/material.dart';void main() => runApp(MyApp()); class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Flutter Demo',theme: ThemeData(primarySwatch: Colors.blue,),home: MyHomePage(title: 'Flutter Demo Home Page'),);} } 復制代碼

通過上述代碼我們知道：

• 首先導入了一個叫做material的dart文件。
• 通過一個main()方法調用了MyApp的一個類。
• 這個MyApp就是這個應用的入口。（根據runApp可知）

對于一個Flutter小白就會有疑問了：

• 為什么要導入material的文件呢? 遇到這樣不明白的地方，我們就可以去官網查資料了，官網給的回答如下：

---

Flutter提供了許多widgets，可幫助您構建遵循Material Design的應用程序。Material應用程序以MaterialApp widget開始， 該widget在應用程序的根部創建了一些有用的widget，其中包括一個Navigator， 它管理由字符串標識的Widget棧（即頁面路由棧）。Navigator可以讓您的應用程序在頁面之間的平滑的過渡。 是否使用MaterialApp完全是可選的，但是使用它是一個很好的做法。

---

也就是說主要是為了向開發者提供已經實現好了的material設計風格，我們可以進入（Windows下Ctrl +鼠標左鍵，Mac下Command+鼠標左鍵 ）material.dart源碼，可以發現如下：

library material;export 'src/material/about.dart'; export 'src/material/animated_icons.dart'; ... // 很多，這里就不占用大量篇幅 export 'widgets.dart'; 復制代碼

從官網我們知道已經有大量的widgets供給我們使用，那么這些在哪里呢？ 當然就是上面的widgets.dart文件了，我們進入這個文件中可以看到內容大致如下：

export 'src/widgets/animated_cross_fade.dart'; ... export 'src/widgets/framework.dart'; ... export 'src/widgets/will_pop_scope.dart'; 復制代碼

也是不同的dart文件，我們進入第一個animated_cross_fade：

class AnimatedCrossFade extends StatefulWidget { /// Creates a cross-fade animation widget.... } 復制代碼

從給的注釋可以知道，這就是一個帶淡入淡出動畫的Widget，這個Widget繼承自StatefulWidget，可以看到StatefulWidget也就是繼承自Widget

abstract class StatelessWidget extends Widget {/// Initializes [key] for subclasses.const StatelessWidget({ Key key }) : super(key: key);/// Creates a [StatelessElement] to manage this widget's location in the tree.////// It is uncommon for subclasses to override this method.@overrideStatelessElement createElement() => StatelessElement(this);@protectedWidget build(BuildContext context); }abstract class StatefulWidget extends Widget {/// Initializes [key] for subclasses.const StatefulWidget({ Key key }) : super(key: key);/// Creates a [StatefulElement] to manage this widget's location in the tree.////// It is uncommon for subclasses to override this method.@overrideStatefulElement createElement() => StatefulElement(this);@protectedState createState(); } 復制代碼

到此我們驚奇的發現，Demo代碼中的MyApp繼承的StatelessWidget原來也在這里，但是MyHomePage卻繼承自StatefulWidget，這是為什么呢？這就會引出第二個問題：

• StatelessWidget和StatefulWidget 的區別是什么呢？

---

StatefulWidget可以擁有狀態，這些狀態在widget生命周期中是可以變的，而StatelessWidget是不可變的。 StatefulWidget至少由兩個類組成：

• 一個StatefulWidget類。
• 一個 State類； StatefulWidget類本身是不變的，但是 State類中持有的狀態在widget生命周期中可能會發生變化。

StatelessWidget用于不需要維護狀態的場景，它通常在build方法中通過嵌套其它Widget來構建UI，在構建過程中會遞歸的構建其嵌套的Widget

---

這也就是為什么MyApp是繼承自StatelessWidget 而 MyHomePage 繼承自StatefulWidget:

• MyApp中不需要更改狀態，僅僅嵌套一個MyHomePage 的Widget
• 而MyHomePage 要繼承StatefulWidget的原因是：通過點擊+去增加數字大小，改變了顯示的狀態，所以需要繼承StatefulWidget。

分析執行方式

我們回到 MyApp這個類的build方法中，可以看到它返回了一個MaterialApp的一個Widget，在前面說過，Material Design的應用是以MaterialApp widget開始的，所以返回了一個MaterialApp

return MaterialApp(title: 'Flutter Demo', //應用名theme: ThemeData(primarySwatch: Colors.blue, // 主題色),home: MyHomePage(title: 'Flutter Demo Home Page'), // 首頁); 復制代碼

從上可以知道由于計數是一個可變的更新狀態，那么就需要兩個類去實現：

• 一個繼承自StatefulWidget, 就是我們的MyHomePage
• 一個繼承自State用于維護這個狀態，也就是我們的_MyHomePageState

class MyHomePage extends StatefulWidget {MyHomePage({Key key, this.title}) : super(key: key);// 我們可以知道這個MyHomePage 的 widget 是這個應用的首頁，而且它是有狀態的，//這就意味著下面定義的State對象中的字段能夠影響應用的顯示。//這個類是這個狀態的配置類，它所持有的這個title值是其父類提供的，//被創建狀態的方法使用，在Widget的子類中總是被標記為“final”final String title;@override_MyHomePageState createState() => _MyHomePageState(); } 復制代碼

MyHomePage這個類里面沒有太多內容：

• 通過構造方法將title值傳入
• 通過createState 返回了一個_MyHomePageState的有狀態的State

到此處我們知道了實際上對數據的操作肯定就在_MyHomePageState中：

class _MyHomePageState extends State<MyHomePage> {int _counter = 0;void _incrementCounter() {setState(() {// 回調setState去告訴Flutter framework 已經有一些狀態發生了改變，// 讓下面這個返回Widget的build方法去展示更新的內容。當然，如果我們沒有回調// 這個setState，那么build方法也不會被調用，也就不會有什么更新展示。_counter++;});}@overrideWidget build(BuildContext context) {// 這個方法在每次setState的時候被調用，例如上面的_incrementCounter方法。//// Flutter framework 是被優化過的，所以它的重新運行build方法是非常快速的，只需要// 運行你需要更新的內容，不需要去分別所有的widgets的實例。return Scaffold(appBar: AppBar(// 我們能夠使用在App.build方法中創建的值，并且賦值title: Text(widget.title),),body: Center(// Center是一個布局Widget，它提供一個child 并且規定了只能居于父類的正中心child: Column(// Column 也是一個布局Widget，它有一系列的子布局并且這些子布局都是垂直方向的。// 默認情況下，Column會調整它自己的大小去適應子級的橫向大小。//// 調用 "debug painting"可以看每一個widget的線框//// Column 有大量的屬性去控制自己的大小和它子級的位置，這里使用了mainAxisAlignment// 讓其子布局內容是垂直方向排列。mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[Text('You have pushed the button this many times:',),Text('$_counter',style: Theme.of(context).textTheme.display1,),],),),floatingActionButton: FloatingActionButton(onPressed: _incrementCounter,tooltip: 'Increment',child: Icon(Icons.add),), // This trailing comma makes auto-formatting nicer for build methods.);} 復制代碼

可以看出這里提供了兩個方法：build和_incrementCounter，我們已經知道一般Widget里面的build方法返回的是一個頁面布局。

_incrementCounter的實現內容很簡單： 就是使用setState方法去自增這個_counter，但此處一點要注意，更改狀態一定要使用 setState，如果不調用 setState將不會有任何的改變，即使你自增了這個_counter。（可以自己嘗試一下）

我們從注釋中可知，這個build方法在每次更新狀態（setState）的時候進行調用，我們在build的方法中增加一行打印的代碼進行驗證：

@overrideWidget build(BuildContext context) {print("build again");return Scaffold(...); 復制代碼

發現果然是每一次點擊+就會調用一次build方法，那這就會引出一個問題：這樣每一次都進行更新，會影響新能嗎？

---

Flutter framework 被優化于快速重啟運行，只需要運行你需要更新的內容，不需要去分別重新構建所有的widgets的實例。

---

所以完全不必擔心這個每次都執行build方法會影響性能。

從整體的布局我們知道，build返回了一個Scaffold的widget：

class Scaffold extends StatefulWidget {/// Creates a visual scaffold for material design widgets.const Scaffold({Key key,this.appBar,this.body,this.floatingActionButton,this.floatingActionButtonLocation,this.floatingActionButtonAnimator,this.persistentFooterButtons,this.drawer,this.endDrawer,this.bottomNavigationBar,this.bottomSheet,this.backgroundColor,this.resizeToAvoidBottomPadding,this.resizeToAvoidBottomInset,this.primary = true,this.extendBody = false,this.drawerDragStartBehavior = DragStartBehavior.down,}) : assert(primary != null),assert(extendBody != null),assert(drawerDragStartBehavior != null),super(key: key);復制代碼

可以知道，這個也是繼承于StatefulWidget，里面有很多可以設置的初始值，這里使用到了三個：

• appBar-布局標題欄
• body-內容顯示區域
• floatingActionButton-浮動按鈕

return Scaffold(appBar: AppBar(title: Text(widget.title),),body: Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[Text('You have pushed the button this many times:',),Text('$_counter',style: Theme.of(context).textTheme.display1,),],),),floatingActionButton: FloatingActionButton(onPressed: _incrementCounter,tooltip: 'Increment',child: Icon(Icons.add),), // This trailing comma makes auto-formatting nicer for build methods.); 復制代碼

將從MyApp攜帶的title賦值給appBar的title，讓其顯示在界面頂端。內容（body）使用了一個Center居中布局，讓其child（也是一個widget）只能顯示在當前正中位置。

class Center extends Align {/// Creates a widget that centers its child.const Center({ Key key, double widthFactor, double heightFactor, Widget child }): super(key: key, widthFactor: widthFactor, heightFactor: heightFactor, child: child); } 復制代碼

緊接著返回了一個Column的child，這個widget 是縱向排列，可有有一系列的子集，所以在Column 布了兩個Text，一個顯示固定文本，一個顯示可變的文本：

class Column extends Flex {Column({Key key,MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,MainAxisSize mainAxisSize = MainAxisSize.max,CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,TextDirection textDirection,VerticalDirection verticalDirection = VerticalDirection.down,TextBaseline textBaseline,List<Widget> children = const <Widget>[],}) : super(children: children,key: key,direction: Axis.vertical,mainAxisAlignment: mainAxisAlignment,mainAxisSize: mainAxisSize,crossAxisAlignment: crossAxisAlignment,textDirection: textDirection,verticalDirection: verticalDirection,textBaseline: textBaseline,); } 復制代碼

需要注意的是，對變量的占位符使用的$符號，就跟java中使用%是一樣的。 最后一個就是我們點擊事件的按鈕floatingActionButton，通過onPressed去調用_incrementCounter方法實現自增計數。 整個運行的流程就到這里算是講完了。

Hot Reload（熱加載）

在文章開始的時候我們知道，我們有一個一道雷一樣的圖標，那就是Hot Reload，這個怎么個意思呢？就是說你如果更新了你的代碼，不用重新運行整個都重新運行，直接使用這個就可以了，可以很迅速的將你更新的內容重新顯示。 在這里有一個很有意思的事情： 我們點擊+讓計數器顯示到1，然后將主題的顏色改成綠色：primarySwatch: Colors.green,

class MyApp extends StatelessWidget {// This widget is the root of your application.@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Flutter Demo',theme: ThemeData(// 主題從藍色更改為綠色primarySwatch: Colors.green,),home: MyHomePage(title: 'Flutter Demo Home Page'),);} } 復制代碼

然后點擊hot reload 會發現，我們的主題更改為綠色了，但是我的計數器顯示的數字仍然是1，并沒有變成0。這也印證了上面的那句話，hot reload只會更改所需要更改的內容，不會影響全部。

總結

這里在做一個總結，希望對才你有所幫助

• 在flutter中，絕大部分可使用的內容都是widget
• 如果只是顯示內容，不涉及更改狀態，就是用StatelessWidget；如果涉及狀態的變更就是用StatefulWidget
• StatefulWidget的實現需要兩步：一個是需要創建繼承StatefulWidget的類；另一個就是創建繼承State的類，一般在State中控制整個狀態。
• 更新狀態一定要調用setState方法，不然不會起作用
• hot reload只會影響更改的內容

總結

以上是生活随笔為你收集整理的Flutter入门篇（一）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。