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


這個網誌中的熱門文章

2023 最新入門零基礎 Kotlin教學【從零開始學 Kotlin 程式設計】Kotlin 教學課程目錄 (Android Kotlin, IntelliJ IDEA, Android Studio, Android APP 開發教學)

最新入門零基礎 Java 教學【從零開始學 Java 程式設計】Java教學課程目錄 (IntelliJ IDEA 開發教學)

Android Studio 歷代版本下載點

nano 文字編輯器

2022 最新入門零基礎 Flutter教學 【Flutter 程式設計入門實戰 30 天】Flutter 教學課程目錄 (IntelliJ IDEA 開發教學)