【從零開始學 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);
},
),
),
);
}
}