【從零開始學 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 生命週期


留言

這個網誌中的熱門文章

最新入門零基礎【從零開始學 Java 程式設計】線上教學課程目錄

NS - Nintendo Switch 遊戲比價網

【從零開始學 Kotlin 程式設計】Android Kotlin 線上教學課程目錄