Flutter怎么用

這篇文章給大家分享的是有關(guān)Flutter怎么用的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

1. 前言

在初學(xué)新技術(shù)之前，我們總會(huì)要從最基本的東西了解起來(lái)，就好比當(dāng)接觸Android的時(shí)候，我們學(xué)四大組件都要學(xué)好久，是否還記得在Android的生命周期？首先讓我們回顧下Android中的生命周期

關(guān)于這個(gè)就不在多說(shuō)了，常用場(chǎng)景總結(jié)下:

  1.啟動(dòng)Activity：系統(tǒng)會(huì)先調(diào)用onCreate方法，然后調(diào)用onStart方法，最后調(diào)用onResume，Activity進(jìn)入運(yùn)行狀態(tài)。
  2.當(dāng)前Activity被其他Activity覆蓋其上或被鎖屏：系統(tǒng)會(huì)調(diào)用onPause方法，暫停當(dāng)前Activity的執(zhí)行。
  3.當(dāng)前Activity由被覆蓋狀態(tài)回到前臺(tái)或解鎖屏：系統(tǒng)會(huì)調(diào)用onResume方法，再次進(jìn)入運(yùn)行狀態(tài)。
  4.當(dāng)前Activity轉(zhuǎn)到新的Activity界面或按Home鍵回到主屏，自身退居后臺(tái)：系統(tǒng)會(huì)先調(diào)用onPause方法，然后調(diào)用onStop方法，進(jìn)入停滯狀態(tài)。
  5.用戶后退回到此Activity：系統(tǒng)會(huì)先調(diào)用onRestart方法，然后調(diào)用onStart方法，最后調(diào)用onResume方法，再次進(jìn)入運(yùn)行狀態(tài)。
  6.當(dāng)前Activity處于被覆蓋狀態(tài)或者后臺(tái)不可見(jiàn)狀態(tài)，即第2步和第4步，系統(tǒng)內(nèi)存不足，殺死當(dāng)前Activity，而后用戶退回當(dāng)前Activity：再次調(diào)用onCreate方法、onStart方法、onResume方法，進(jìn)入運(yùn)行狀態(tài)。
  7.用戶退出當(dāng)前Activity：系統(tǒng)先調(diào)用onPause方法，然后調(diào)用onStop方法，最后調(diào)用onDestory方法，結(jié)束當(dāng)前Activity。

emmm，相信小伙伴們現(xiàn)在應(yīng)該記憶起來(lái)了吧,前戲好了，進(jìn)入主題，聊聊我們今天的主人公"State"。

2. Widget概念
在我們的主人公出場(chǎng)前，先認(rèn)識(shí)下他的小伙伴

  Flutter中幾乎所有的對(duì)象都是一個(gè)Widget，與原生開(kāi)發(fā)中“控件”不同的是，
  Flutter中的widget的概念更廣泛，它不僅可以表示UI元素，也可以表示一些功能性的組件如：用于手勢(shì)檢測(cè)的 GestureDetector widget、用于應(yīng)用主題數(shù)據(jù)傳遞的Theme等等。
而原生開(kāi)發(fā)中的控件通常只是指UI元素

3. State的引入

• StatelessWidget(用于不需要維護(hù)狀態(tài)的場(chǎng)景)

  abstract class StatelessWidget extends Widget

• StatefulWidget(用于需要維護(hù)狀態(tài)的場(chǎng)景)

  abstract class StatefulWidget extends Widget

從上述的代碼中我們看到他們都繼承了一個(gè)東西Widget,那就先簡(jiǎn)單的看下這個(gè)類(lèi)

  @immutable
  abstract class Widget extends DiagnosticableTree {    const Widget({ this.key });    final Key key;    @protected
    Element createElement();    @override
    String toStringShort() {      return key == null ? '$runtimeType' : '$runtimeType-$key';
    }    @override
    void debugFillProperties(DiagnosticPropertiesBuilder properties) {      super.debugFillProperties(properties);
      properties.defaultDiagnosticsTreeStyle = DiagnosticsTreeStyle.dense;
    }    static bool canUpdate(Widget oldWidget, Widget newWidget) {      return oldWidget.runtimeType == newWidget.runtimeType
          && oldWidget.key == newWidget.key;
    }
  }

上述代碼中有一個(gè)我們很常見(jiàn)的方法,每次在繼承的時(shí)候都需要重寫(xiě)的一個(gè)方法

  @override
  StatefulElement createElement() => StatefulElement(this);

繼續(xù)跟蹤StatefulElement發(fā)現(xiàn)存在一個(gè)widget.createState()方法，發(fā)現(xiàn)了就要繼續(xù)，寧殺錯(cuò)，莫放過(guò)

  class StatefulElement extends ComponentElement {    /// Creates an element that uses the given widget as its configuration.
    StatefulElement(StatefulWidget widget)
        : _state = widget.createState(),          super(widget) {
     .....      assert(_state._element == null);
      _state._element = this;      assert(_state._widget == null);
      _state._widget = widget;      assert(_state._debugLifecycleState == _StateLifecycle.created);
    }

點(diǎn)擊createState方法我們終于找到了今天的主人公,沒(méi)錯(cuò)，就是它，State，跑不掉了。

  @protected
  State createState();

1. 生命周期 到了現(xiàn)在這一步，我們已經(jīng)找到想要的了，正如前面所說(shuō),Android有自己的生命周期，那么作為Flutter也有自己獨(dú)特的生命周期

   
   

嗯，我一眼就看到了initState這個(gè)方法，還記得在網(wǎng)絡(luò)請(qǐng)求的時(shí)候亦或是變量的初始化，總是要寫(xiě)到這個(gè)方法里面

  @override
 void initState() {   // TODO: implement initState
   super.initState();
   _loadItemPage();
 }

我們可以將上述方法分為三個(gè)部分進(jìn)行描述，見(jiàn)下圖：

大致可以看成三個(gè)階段

•  初始化（插入渲染樹(shù)）

• 構(gòu)造函數(shù)

  不屬于生命周期，因?yàn)檫@個(gè)時(shí)候State的widget屬性為空，此時(shí)無(wú)法在構(gòu)造函數(shù)中訪問(wèn)widget屬性

• initState

   /// Called when this object is inserted into the tree.
  這個(gè)函數(shù)在生命周期中只調(diào)用一次。這里可以做一些初始化工作，比如初始化State的變量

• didChangeDependencies

   /// Called when a dependency of this [State] object changes.
  這個(gè)函數(shù)會(huì)緊跟在initState之后調(diào)用

•  狀態(tài)改變（在渲染樹(shù)中存在）

• didUpdateWidget

  /// Called whenever the widget configuration changes.
  當(dāng)組件的狀態(tài)改變的時(shí)候就會(huì)調(diào)用didUpdateWidget,比如調(diào)用了setStat

•  銷(xiāo)毀（從渲染樹(shù)種移除）

• deactivate

/// Called when this object is removed from the tree.在dispose之前，會(huì)調(diào)用這個(gè)函數(shù)。
復(fù)制代碼

• dispose

  /// Called when this object is removed from the tree permanently.
  一旦到這個(gè)階段，組件就要被銷(xiāo)毀了，這個(gè)函數(shù)一般會(huì)移除監(jiān)聽(tīng)，清理環(huán)境。

這個(gè)函數(shù)在生命周期中只調(diào)用一次。這里可以做一些初始化工作，比如初始化State的變量。

大體這樣吧，最后來(lái)個(gè)圖表總結(jié)下

1. 示例分析 可能有人會(huì)說(shuō)，bb了那么久，毛都沒(méi)看到一根,所以講了這么多，不來(lái)點(diǎn)實(shí)際的怎么對(duì)的住之前的bb呢？來(lái)人啊，上代碼

  import 'package:flutter/material.dart';  class LifeState extends StatefulWidget {    @override
    _lifeStates createState() => _lifeStates();
  }  class _lifeStates extends State<LifeState> {    @override
    void initState() {      // TODO: implement initState
      super.initState();
      print('initState');
    }    @override
    void didChangeAppLifecycleState(AppLifecycleState state) {
      print(state.toString());
    }    @override
    void didChangeDependencies() {      // TODO: implement didChangeDependencies
      super.didChangeDependencies();
      print('didChangeDependencies');
    }    @override
    void didUpdateWidget(LifeState oldWidget) {      super.didUpdateWidget(oldWidget);
      print('didUpdateWidget');
    }    @override
    Widget build(BuildContext context) {
      print('build');      // TODO: implement build
      return MaterialApp(
        home: Center(
            child: GestureDetector(
          child: new Text('lifeCycle'),
          onTap: () {
            Navigator.of(context)
              .  push(new MaterialPageRoute(builder: (BuildContext c) {              return new Text('sdfs');
            }));
          },
        )),
      );
    }    @override
    void reassemble() {      // TODO: implement reassemble
      super.reassemble();
      print('reassemble');
    }    @override
    void deactivate() {      // TODO: implement deactivate
      super.deactivate();
      print('deactivate');
    }    @override
    void dispose() {      // TODO: implement dispose
      super.dispose();
      print('dispose');
    }
  }

測(cè)試結(jié)果

1. 創(chuàng)建widget

  initState
  didChangeDependencies
  build

1. 退出頁(yè)面

  deactivate
  dispose

1. 點(diǎn)擊熱加載按鈕

  reassemble
  didUpdateWidget
  build

1. app從顯示到后臺(tái)(home鍵)

  AppLifecycleState.inactive
  AppLifecycleState.paused

1. app從后臺(tái)回到前臺(tái)

  AppLifecycleState.inactive
  AppLifecycleState.resumed

感謝各位的閱讀！關(guān)于“Flutter怎么用”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！