【從零開始學 Flutter 程式設計】Flutter 生命週期

【從零開始學 Flutter 程式設計】線上教學課程目錄 使用 Dart 程式語言，開發 Android 和 iOS APP 應用程式。

• StatefulWidget.createState()
  系統會呼叫此方法來創建一個 State。
• initState()
  我們通常會重寫這個函數，進行初始化的操作，在 Flutter 生命週期當中，只會被執行一次。
• didChangeDependencies()
  當 State 對象的關係發生變化時，這個方法總會被呼叫。
• build()
  走完 didChangeDependencies 步驟後，系統認為State 已經準備好了，就會呼叫 build() 來構建畫面。

我們需要在這個函數中，返回一個Widget。

• deactivate()
  當頁面切換時，會呼叫它，此時 State 在視圖樹中的位置發生了變化，需要先暫時移除後添加。重寫的時候記得要先呼叫 super.deactivate()。
• dispose()
  在 APP 銷毀前會觸發這個方法，我們可以在這裡將資源釋放。而在呼叫這個方法之前，會先呼叫 deactivate()。注意的事重寫這個方法時必須要先呼叫 super.dispose()。
• didUpdateWidget(covariant T oldWidget)
  當元件發生變化時，會被呼叫這個函數，則會觸發 build()，重畫元件樹。
• setState()
  當需要更新畫面時，可以呼叫這個函數，則會觸發 build()，重畫元件樹。

簡單跳頁範例

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('HKT 線上教室'),
        ),
        body: HomePage(),
      ),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: RaisedButton(
        child: Text('跳到 B 頁'),
        onPressed: () {
          Navigator.push(
              context, MaterialPageRoute(builder: (context) => BPage()));
        },
      ),
    );
  }
}

class BPage extends StatefulWidget{
  @override
  _BPageState createState() => _BPageState();
}

class _BPageState extends State<BPage>{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('我是 B 頁'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('返回首頁'),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
      ),
    );
  }
}

我們可以在 _BPageState 類別中加入 initState、didChangeDependencies、deactivate、dispose 和 didUpdateWidget，並在進入每個方法內，加入印出 log：

class _BPageState extends State<BPage>{
  @override
  void initState() {
    super.initState();
    print('initState+++');
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    print('didChangeDependencies+++');
  }

  @override
  void deactivate() {
    print('deactivate+++');
    super.deactivate();
  }

  @override
  void dispose() {
    print('dispose+++');
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('我是 B 頁'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('返回首頁'),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
      ),
    );
  }
}

另外一個了解 Flutter 生命週期的方法是，可以在 _BPageState 類別中加入 with WidgetsBindingObserver 監聽生命週期，在initState 註冊監聽事件、在 didChangeAppLifecycleState 印出當下狀態、在 dispose 移除監聽事件

class _BPageState extends State<MyHomePage> with WidgetsBindingObserver{
...
...
...

@override
  void initState(){
    super.initState();
    //註冊監聽事件
    WidgetsBinding.instance.addObserver(this);
  }

@override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    //印出狀態
    debugPrint('$state');
  }

  @override
  void dispose(){
    //移除監聽事件
    WidgetsBinding.instance.removeObserver(this);
    super.dispose();
  }
}

完整程式碼

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('HKT 線上教室'),
        ),
        body: HomePage(),
      ),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: RaisedButton(
        child: Text('跳到 B 頁'),
        onPressed: () {
          Navigator.push(
              context, MaterialPageRoute(builder: (context) => BPage()));
        },
      ),
    );
  }
}

class BPage extends StatefulWidget {
  @override
  _BPageState createState() => _BPageState();
}

class _BPageState extends State<BPage> with WidgetsBindingObserver {
  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    print('$state');
  }

  @override
  void initState() {
    super.initState();
    print('initState+++');
    WidgetsBinding.instance.addObserver(this);
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    print('didChangeDependencies+++');
  }

  @override
  void deactivate() {
    print('deactivate+++');
    super.deactivate();
  }

  @override
  void dispose() {
    print('dispose+++');
    WidgetsBinding.instance.removeObserver(this);
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('我是 B 頁'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('返回首頁'),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
      ),
    );
  }
}

Android APP 生命週期

iOS APP 生命週期