Flutter 生命周期介绍与使用

Flutter 生命周期简介与使用

Flutter 是一个由 Google 开发的开源 UI 软件开发工具包，用于跨平台应用程序的开发。了解 Flutter 的生命周期对于构建高效且响应式的应用程序至关重要。在这篇博客中，我们将探讨 Flutter 的生命周期管理，包括 Stateful 和 Stateless Widgets 的生命周期方法，以及如何在不同的生命周期阶段管理状态。

1. Flutter Widget 的基础知识

在 Flutter 中，Widget 是一切的基础。Flutter 应用程序中的每一个元素都是一个 Widget。Flutter 提供了两种主要类型的 Widget：

StatelessWidget：一个无状态的 Widget，不会根据用户交互进行重建。
StatefulWidget：一个有状态的 Widget，它可以根据状态的变化进行更新和重建。

StatelessWidget

StatelessWidget 没有生命周期方法，因为它不会改变状态。其构建方法 (build) 只会在创建时被调用一次。一个典型的 StatelessWidget 看起来如下：

class MyStatelessWidget extends StatelessWidget {@overrideWidget build(BuildContext context) {return Container(child: Text('Hello, Flutter!'),);}
}

StatefulWidget

StatefulWidget 拥有更复杂的生命周期，涉及到创建、更新和销毁。下面我们将详细介绍 StatefulWidget 的生命周期方法。

2. StatefulWidget 生命周期

StatefulWidget 有两个类：

StatefulWidget 类：定义一个不变的 Widget。
State 类：包含 Widget 的状态，并负责更新和维护 Widget 的状态。

StatefulWidget 生命周期方法

createState()：
- 在 StatefulWidget 被创建时调用。这个方法用于创建与此 Widget 关联的 State 对象。
- 实例：
```
@override
_MyStatefulWidgetState createState() => _MyStatefulWidgetState();
```
initState()：
- 在 State 对象创建后立即调用。通常用于初始化数据，如网络请求、动画控制器等。
- 注意：在这个阶段不能使用 BuildContext 进行构建。
- 实例：
```
@override
void initState() {super.initState();// 初始化代码
}
```
didChangeDependencies()：
- 当 State 对象依赖的对象改变时调用。例如，InheritedWidget 更新时会触发此方法。
- 实例：
```
@override
void didChangeDependencies() {super.didChangeDependencies();// 响应依赖变化
}
```

build(BuildContext context)：

必须实现的方法，用于构建 Widget 的子树。每次 Widget 状态改变时都会被调用。

实例：

@override
Widget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('StatefulWidget Example'),),body: Center(child: Text('Hello, StatefulWidget!'),),);
}

didUpdateWidget(covariant OldWidget oldWidget)：

当 Widget 被重新构建时调用，例如父 Widget 的状态改变时。

实例：

@override
void didUpdateWidget(covariant MyStatefulWidget oldWidget) {super.didUpdateWidget(oldWidget);// 响应父组件的变化
}

setState(fn)：
- 在需要更新 Widget 的状态并触发重建时调用。
- 实例：
```
void _updateText() {setState(() {// 更新状态});
}
```

deactivate()：

在 State 对象从 Widget 树中移除时调用。

实例：

@override
void deactivate() {super.deactivate();// 执行必要的清理操作
}

dispose()：
- 在 State 对象永久移除并释放资源时调用，例如取消订阅和释放控制器。
- 实例：
```
@override
void dispose() {// 释放资源super.dispose();
}
```

完整示例

class MyStatefulWidget extends StatefulWidget {@override_MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}class _MyStatefulWidgetState extends State<MyStatefulWidget> {String _displayText = 'Hello, Flutter!';@overridevoid initState() {super.initState();print('initState called');}@overridevoid didChangeDependencies() {super.didChangeDependencies();print('didChangeDependencies called');}@overrideWidget build(BuildContext context) {print('build called');return Scaffold(appBar: AppBar(title: Text('StatefulWidget Lifecycle'),),body: Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: [Text(_displayText),ElevatedButton(onPressed: _updateText,child: Text('Update Text'),),],),),);}@overridevoid didUpdateWidget(covariant MyStatefulWidget oldWidget) {super.didUpdateWidget(oldWidget);print('didUpdateWidget called');}void _updateText() {setState(() {_displayText = 'Hello, Flutter with StatefulWidget!';});}@overridevoid deactivate() {super.deactivate();print('deactivate called');}@overridevoid dispose() {super.dispose();print('dispose called');}
}

生命周期总结

在 Flutter 的 StatefulWidget 生命周期中，各个方法的调用顺序如下：

createState()
initState()
didChangeDependencies()
build()
didUpdateWidget()
setState()
deactivate()
dispose()

3. Flutter 生命周期的应用场景

3.1 网络请求的管理

在 Flutter 应用中，通常需要在组件加载时发起网络请求并展示数据。可以使用 initState() 来执行一次性的数据加载操作。

@override
void initState() {super.initState();fetchData();
}Future<void> fetchData() async {// 网络请求代码
}

3.2 动画的管理

在 Flutter 中，动画通常与 AnimationController 和 TickerProvider 一起使用。需要在 initState() 中初始化控制器，并在 dispose() 中释放资源。

late AnimationController _controller;@override
void initState() {super.initState();_controller = AnimationController(duration: const Duration(seconds: 2),vsync: this,)..repeat();
}@override
void dispose() {_controller.dispose();super.dispose();
}

3.3 状态的持久化

在应用中可能需要保存一些重要的数据，即使在应用被销毁后也需要保持状态。可以使用 SharedPreferences 或其他持久化存储方法。

Future<void> _saveData() async {final prefs = await SharedPreferences.getInstance();await prefs.setString('key', 'value');
}Future<void> _loadData() async {final prefs = await SharedPreferences.getInstance();String? value = prefs.getString('key');
}

4. 示例应用

下面是一个使用 Flutter 生命周期的完整示例应用，它展示了一个计数器应用程序，在用户按下按钮时更新计数，并在屏幕重新加载时保存状态。

import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Flutter Lifecycle Demo',home: CounterScreen(),);}
}class CounterScreen extends StatefulWidget {@override_CounterScreenState createState() => _CounterScreenState();
}class _CounterScreenState extends State<CounterScreen> {int _counter = 0;@overridevoid initState() {super.initState();_loadCounter();}Future<void> _loadCounter() async {final prefs = await SharedPreferences.getInstance();setState(() {_counter = prefs.getInt('counter') ?? 0;});}Future<void> _incrementCounter() async {setState(() {_counter++;});final prefs = await SharedPreferences.getInstance();await prefs.setInt('counter', _counter);}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('Flutter Lifecycle Demo'),),body: Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: [Text('You have pushed the button this many times:',),Text('$_counter',style: Theme.of(context).textTheme.headlineMedium,),ElevatedButton(onPressed: _incrementCounter,child: Text('Increment'),),],),),);}@overridevoid dispose() {super.dispose();print('dispose called');}
}