引言
今天，小编给大家分享如何在 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局部导航管理的资料请关注编程网其它相关文章！
