Flutter入門篇（一）

奇葩AnJoiner發表於2019-03-03
Flutter

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

環境搭建

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

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

Flutter的第一個應用

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

import 'package:flutter/material.dart';

//應用啟動
void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // 這個App的根Widget
  @override
  Widget 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++;
    });
  }

  @override
  Widget 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 （就是那個綠色的三角）之後我們可以看到如下執行結果：

Flutter入門篇（一）

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

Demo分析

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

import 'package:flutter/material.dart';

void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget 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.
  @override
  StatelessElement createElement() => StatelessElement(this);

  @protected
  Widget 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.
  @override
  StatefulElement createElement() => StatefulElement(this);
  @protected
  State 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++;
    });
  }

  @override
  Widget 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的方法中增加一行列印的程式碼進行驗證：

@override
  Widget 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.
  @override
  Widget 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只會影響更改的內容

相關文章