引言
今天,小编给大家分享如何在 flutter 中实现 ‘局部导航’。开始之前我们先来统一一下关于 局部导航 的概念。局部导航是什么?
引言
今天,小编给大家分享如何在 flutter 中实现 ‘局部导航’。开始之前我们先来统一一下关于 局部导航 的概念。
局部导航是什么?
我们在 flutter 中使用 navigator 来管理 app 的页面堆栈,主要包括 push、pop 这两种操作。而当我们UI设计划分得更细致时,可能遇到需要在某个独立页面里,单独维护一套子级的堆栈管理。这就叫 局部导航管理。
局部控件内单独维护局部范围内的堆栈管理的形式有很多,例如:
- 形式一: 左侧是菜单栏,右侧是内容块,在内容块中单独维护局部的页面push、pop、操作。
- 形式二:dialog 弹窗中单独维护布局堆栈管理。
那么下面,小编使用 dialog 的形式来分享实现过程。
实现步骤
第一步
创建工具类,用于局部导航管理,思想是:将需要单独进行堆栈管理的页面使用新的子级 navigator 进行包裹,单独维护一个 navigator,做到每个堆栈容器实现内部各自管理。
///工具类:用于局部导航管理 class LocalNavigator extends StatelessWidget { final Widget child; const LocalNavigator(this.child, {Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Navigator( initialRoute: '/', onGenerateRoute: (settings) { return MaterialPageRoute( settings: const RouteSettings(name: '/'), builder: (context) { return child; }, ); }, ); } }
第二步
如上 demo 示例,实现一个单独堆栈管理的弹窗内部,对弹窗方法进行封装处理。
在 showDialog
时使用我们封装的工具类 LocalNavigator
作为父节点,对具体子页面节点进行包裹。
那么子页面内的堆栈操作(push 、pop、)都会在我们的 LocalNavigator 堆栈中响应。
/// 通过局部导航开启一个弹窗 static Future<T?> showLocalDialog<T>( BuildContext context, Widget child, ) { return showDialog<T?>( context: context, builder: (context) { return Dialog( child: SizedBox( width: 200, height: 300, child: LocalNavigator(child), ), ); }, ); }
第三步
弹出 dialog,附上 demo 样例的完整代码
void main() { runApp(const Material( child: MyApp(), )); } class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: const Text('demo'), ), body: StatefulBuilder( builder: (context, setState) { return Center( child: TextButton( child: const Text('打开弹窗'), onPressed: () { showLocalDialog<String?>(context, const _PageA()) .then( (data) { //接收来自 dialog 的回调数据 if (data != null) { Fluttertoast.showToast(msg: 'mainPage 接收数据:$data'); } }, ); }, ), ); }, ), ), ); } } class _PageA extends StatelessWidget { const _PageA({Key? key}) : super(key: key); void jumpPageB(BuildContext context) { Navigator.push<String?>( context, MaterialPageRoute( builder: (context) => const _PageB(), ), ).then( (data) { if (data != null) { //接收来自 pageB 的回调数据 Fluttertoast.showToast(msg: 'pageA 接收数据:$data'); } }, ); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: const Text('PageA')), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ TextButton( onPressed: () { jumpPageB(context); }, child: const Text('跳转页面B'), ), ], ), ), ); } } class _PageB extends StatelessWidget { const _PageB({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: const Text('PageB')), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ TextButton( onPressed: () { Navigator.of(context).pop('我是来自pageB的数据'); }, child: const Text('返回pageA'), ), const SizedBox(height: 20), TextButton( onPressed: () { Navigator.of(context, rootNavigator: true).pop('我是来自pageC的数据'); }, child: const Text('关闭整个弹窗'), ), ], ), ), ); } }
技术点分析:
1. 局部 Navigator 管理重点
将 需要维护局部堆栈关系的子节点 进行嵌套,使用自定义的工具类 LocalNavigator
作为父节点。
2. 返回上一级页面,与关闭整个弹窗怎么区分?
关键点在于 Navigator.of(context)
中的 rootNavigator
可选入参,默认是不使用根节点下的 navigator。
- 返回上一级页面,使用当前的堆栈进行操作
Navigator.of(context).pop()
- 关闭整个弹窗,意味着在根堆栈进行 pop 操作
Navigator.of(context, rootNavigator: true).pop()
3. 如何接收页面关闭时回传的数据?
- 关闭时通过 pop() 方法进行数据回传
Navigator.of(context).pop(data)
- 接收回传数据,在打开新堆栈的 push 方法中接收回返回值
Navigator.push<T?>(context, route).then((T){ })
T 为返回值的泛型标识,注意在接收处理的地方需要对返回值进行判空操作
Navigator.push<String?>( context, MaterialPageRoute( builder: (context) => const _PageB(), ), ).then( (data) { if (data != null) { //接收来自 pageB 的回调数据 Fluttertoast.showToast(msg: 'pageA 接收数据:$data'); } }, );
以上就是详解flutter如何实现局部导航管理的详细内容,更多关于flutter局部导航管理的资料请关注好代码网其它相关文章!