需求
- A界面跳轉(zhuǎn)到B界面,暫停A界面的音樂或者視頻
- B界面返回到A界面奕锌，播放A界面的音樂或者視頻
- A界面切換到后臺殖告，暫停A界面的音樂或者視頻
- A界面從后臺切換到前臺,播放A界面的音樂或者視頻
需求通過理解修改為：
- 監(jiān)聽 StatefulWidget 的 onPause 方法
- 監(jiān)聽 StatefulWidget 的 onResume 方法
背景
我們在使用Flutter開發(fā)界面時恳邀，很多時候是需要在當(dāng)前界面切換到后臺，或者說當(dāng)前界面跳轉(zhuǎn)到第二個頁面時颂砸，需要處理一些事宜噪奄，比如說音樂暫停，視頻暫停等等人乓。但是 StatefulWidget 中的state并沒有提供如Activity的onPause梗醇，onResume方法。所以我們需要自己搞一下撒蟀，搞一下這2個方法出來叙谨，只要在這2個方法中處理便可以滿足上面的需求。
效果
創(chuàng)建2個widget界面
1保屯、LifecyclePage 簡稱 A界面
2手负、LifecycleNextPage 簡稱 B界面
- 場景：A界面打開生命周期如下
image.png
-
場景2：A界面點擊按鈕跳轉(zhuǎn)到B界面
image.png
-
場景3：B界面點擊返回到A界面
image.png
-
場景4：A界面切換到后臺
image.png
-
場景5：A界面后臺切換到前臺
image.png
-
場景6：A界面彈出對話框
image.png
-
場景7：關(guān)閉對話框
image.png
實現(xiàn)
新增方法
- onCreate
- onResume
- onPause
- onDestroy
onStart和onStop 這里就不做添加了涤垫，以上4個方法便可以完成需求。
代碼
老樣子竟终，直接上代碼蝠猬，不講原理，就是這么拽统捶。
- 創(chuàng)建NavigatorObserver
import 'dart:async';
import 'package:built_collection/built_collection.dart';
import 'package:flutter/widgets.dart';
class NavigationHistoryObserver extends NavigatorObserver {
final List<Route<dynamic>?> _history = <Route<dynamic>?>[];
BuiltList<Route<dynamic>> get history =>
BuiltList<Route<dynamic>>.from(_history);
Route<dynamic>? get top => _history.last;
final List<Route<dynamic>?> _poppedRoutes = <Route<dynamic>?>[];
BuiltList<Route<dynamic>> get poppedRoutes =>
BuiltList<Route<dynamic>>.from(_poppedRoutes);
Route<dynamic>? get next => _poppedRoutes.last;
final StreamController _historyChangeStreamController =
StreamController.broadcast();
Stream<dynamic> get historyChangeStream =>
_historyChangeStreamController.stream;
static final NavigationHistoryObserver _singleton =
NavigationHistoryObserver._internal();
NavigationHistoryObserver._internal();
factory NavigationHistoryObserver() {
return _singleton;
}
@override
void didPop(Route<dynamic> route, Route<dynamic>? previousRoute) {
_poppedRoutes.add(_history.last);
_history.removeLast();
_historyChangeStreamController.add(HistoryChange(
action: NavigationStackAction.pop,
newRoute: route,
oldRoute: previousRoute,
));
}
@override
void didPush(Route<dynamic> route, Route<dynamic>? previousRoute) {
_history.add(route);
_poppedRoutes.remove(route);
_historyChangeStreamController.add(HistoryChange(
action: NavigationStackAction.push,
newRoute: route,
oldRoute: previousRoute,
));
}
@override
void didRemove(Route<dynamic> route, Route<dynamic>? previousRoute) {
_history.remove(route);
_historyChangeStreamController.add(HistoryChange(
action: NavigationStackAction.remove,
newRoute: route,
oldRoute: previousRoute,
));
}
@override
void didReplace({Route<dynamic>? newRoute, Route<dynamic>? oldRoute}) {
int oldRouteIndex = _history.indexOf(oldRoute);
_history.replaceRange(oldRouteIndex, oldRouteIndex + 1, [newRoute]);
_historyChangeStreamController.add(HistoryChange(
action: NavigationStackAction.replace,
newRoute: newRoute,
oldRoute: oldRoute,
));
}
}
class HistoryChange {
HistoryChange({this.action, this.newRoute, this.oldRoute});
final NavigationStackAction? action;
final Route<dynamic>? newRoute;
final Route<dynamic>? oldRoute;
}
enum NavigationStackAction { push, pop, remove, replace }
- 設(shè)置navigatorObservers
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Android小樣',
...
navigatorObservers: [NavigationHistoryObserver()],
...
);
}
}
- 創(chuàng)建PageState
abstract class PageState<T extends StatefulWidget> extends State<T>
with PageStateMixin {
static final List<BuildContext> _contextList = [];
@override
void initState() {
super.initState();
onCreate();
WidgetsBinding.instance.addPostFrameCallback((_) {
_addToContextList();
});
}
@override
void dispose() {
onDestroy();
_removeFromContextList();
super.dispose();
}
@override
void setState(VoidCallback fn) {
if (mounted) {
super.setState(fn);
}
}
void _addToContextList() {
if (!mounted) return;
if (!_contextList.contains(context)) {
_contextList.add(context);
}
}
void _removeFromContextList() {
if (_contextList.isEmpty) return;
_contextList.removeWhere((element) => element == context);
}
}
mixin PageStateMixin<T extends StatefulWidget> on State<T> {
Route? _route;
@override
void didChangeDependencies() {
_route ??= ModalRoute.of(context);
if (_route != null) {
RouteHistoryObserver.addResumeCallback(_route!, onResume);
RouteHistoryObserver.addPauseCallback(_route!, onPause);
}
super.didChangeDependencies();
}
@override
void dispose() {
_route ??= ModalRoute.of(context);
if (_route != null) {
RouteHistoryObserver.removeResumeCallback(_route!, onResume);
RouteHistoryObserver.removePauseCallback(_route!, onPause);
}
super.dispose();
}
void onCreate() {}
void onResume() {}
void onPause() {}
void onDestroy() {}
}
class RouteHistoryObserver with WidgetsBindingObserver {
static final Map<Route, Set<VoidCallback>> _resumeCallbacks = {};
static final Map<Route, Set<VoidCallback>> _pauseCallbacks = {};
static bool _initialized = false;
static Route? _currTopRoute;
static Route<dynamic>? get topRoute => _currTopRoute;
static void init() {
if (_initialized) return;
_initialized = true;
NavigationHistoryObserver()
.historyChangeStream
.listen(_appRouteHistoryChange);
WidgetsBinding.instance.addObserver(RouteHistoryObserver());
}
@override
void didChangeAppLifecycleState(AppLifecycleState state) {
if (state == AppLifecycleState.resumed) {
_appResume();
} else if (state == AppLifecycleState.paused) {
_appPause();
}
}
static void _appRouteHistoryChange(dynamic historyChange) {
if (NavigationHistoryObserver().history.isEmpty) return;
var topRoute = NavigationHistoryObserver().top;
if (historyChange.action == NavigationStackAction.push) {
var preRoute = (historyChange as HistoryChange).oldRoute;
var pauseCallbackList = _pauseCallbacks[preRoute];
if (pauseCallbackList != null) {
for (var callback in pauseCallbackList) {
callback.call();
}
}
} else if (historyChange.action == NavigationStackAction.pop) {
var pauseCallbackList = _pauseCallbacks[_currTopRoute];
if (pauseCallbackList != null) {
for (var callback in pauseCallbackList) {
callback.call();
}
}
}
if (topRoute != _currTopRoute) {
_currTopRoute = topRoute;
var resumeCallbackList = _resumeCallbacks[topRoute];
if (resumeCallbackList == null) return;
for (var callback in resumeCallbackList) {
callback.call();
}
}
}
static void addResumeCallback(Route route, VoidCallback callback) {
var callbackList = _resumeCallbacks[route];
if (callbackList == null) {
callbackList = {};
_resumeCallbacks[route] = callbackList;
}
if (callbackList.add(callback) && _currTopRoute == route) {
callback.call();
}
}
static void removeResumeCallback(Route route, VoidCallback callback) {
var callbackList = _resumeCallbacks[route];
if (callbackList == null) return;
callbackList.remove(callback);
}
static void addPauseCallback(Route route, VoidCallback callback) {
var callbackList = _pauseCallbacks[route];
if (callbackList == null) {
callbackList = {};
_pauseCallbacks[route] = callbackList;
}
callbackList.add(callback);
}
static void removePauseCallback(Route route, VoidCallback callback) {
var callbackList = _pauseCallbacks[route];
if (callbackList == null) return;
callbackList.remove(callback);
}
static void _appResume() {
if (_currTopRoute == null) return;
var callbackList = _resumeCallbacks[_currTopRoute];
if (callbackList == null) return;
for (var callback in callbackList) {
callback.call();
}
}
static void _appPause() {
if (_currTopRoute == null) return;
var pauseCallbackList = _pauseCallbacks[_currTopRoute];
if (pauseCallbackList == null) return;
for (var callback in pauseCallbackList) {
callback.call();
}
}
}
// 需要在app啟動時初始化
RouteHistoryObserver.init();
- 創(chuàng)建2個界面Widget
// 第一個界面
class LifecyclePage extends StatefulWidget {
const LifecyclePage({super.key});
@override
State<LifecyclePage> createState() => _LifecyclePageState();
}
class _LifecyclePageState extends PageState<LifecyclePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: XYAppBar(
title: "Flutter生命周期",
onBack: () {
Navigator.pop(context);
},
),
body: SafeArea(
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(
onPressed: () {
Navigator.push(context, MaterialPageRoute(
builder: (BuildContext context) {
return const LifecycleNextPage();
},
));
},
child: const Text("跳轉(zhuǎn)"),
),
ElevatedButton(
onPressed: () {
_showDialog(context);
},
child: const Text("彈出框"),
),
],
),
),
),
);
}
void _showDialog(BuildContext context) {
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: const Text('Dialog Title'),
content: const Text('This is the content of the dialog.'),
actions: [
TextButton(
onPressed: () {
Navigator.of(context).pop(); // Close the dialog
},
child: const Text('Close'),
),
],
);
},
);
}
@override
void onCreate() {
super.onCreate();
logger.d("LifecyclePage----onCreate");
}
@override
void onPause() {
super.onPause();
logger.d("LifecyclePage----onPause");
}
@override
void onResume() {
super.onResume();
logger.d("LifecyclePage----onResume");
}
@override
void onDestroy() {
logger.d("LifecyclePage----onDestroy");
super.onDestroy();
}
}
//第二個界面
import 'package:flutter/material.dart';
import 'package:flutter_xy/widgets/xy_app_bar.dart';
import 'package:flutter_xy/xydemo/lifecycle/core/page_state.dart';
import '../../utils/log_utils.dart';
class LifecycleNextPage extends StatefulWidget {
const LifecycleNextPage({super.key});
@override
State<LifecycleNextPage> createState() => _LifecycleNextPageState();
}
class _LifecycleNextPageState extends PageState<LifecycleNextPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: XYAppBar(
title: "Flutter生命周期第二頁",
onBack: () {
Navigator.pop(context);
},
),
body: const SafeArea(
child: Center(
child: Text(
"第二頁",
style: TextStyle(fontSize: 30),
),
),
),
);
}
@override
void onCreate() {
super.onCreate();
logger.d("LifecycleNextPage----onCreate");
}
@override
void onPause() {
super.onPause();
logger.d("LifecycleNextPage----onPause");
}
@override
void onResume() {
super.onResume();
logger.d("LifecycleNextPage----onResume");
}
@override
void onDestroy() {
logger.d("LifecycleNextPage----onDestroy");
super.onDestroy();
}
}
OK了榆芦，自己去測試測試吧。
詳情見Github：github.com/yixiaolunhui/flutter_xy
