Flutter 导航返回按钮
原创
©著作权归作者所有:来自51CTO博客作者haocold的原创作品,请联系作者获取转载授权,否则将追究法律责任
二级页面的返回按钮
Flutter 版本:2.5.1
二级页面的返回按钮,是空的,只能左滑返回。
自定义一个返回按钮:
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text("文本示例"),
// 返回按钮
leading: BackButton(onPressed: () {
Navigator.pop(context);
})),
body: const TextBody(),
),
);
}
如果页面很多,每个页面都需要自定义,代码也都是重复的。
既然都需要,那就可以抽取出来,封装一下。
在自定义的 Widget 中,返回一个
@override
Widget build(BuildContext context) {
return BackButton(onPressed: () {
Navigator.pop(context);
});
}
当点击 返回
时,结果界面 全黑
了,一脸问号❓❓❓
疑问
当 Navigator.pop(context);
放在具体界面时,上下文 context
与封装的上下文 context
不是同一个。
- 1.自定义按钮时,打调试断点,查看
context
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text("文本示例"),
// 返回按钮
leading: BackButton(onPressed: () {
Navigator.pop(context); // 在这行打了个调试断点,查看 context
})),
body: const TextBody(),
),
);
}
- 2.封装返回按钮时,打调试断点,查看
context
@override
Widget build(BuildContext context) {
return BackButton(onPressed: () {
Navigator.pop(context); // 在这行打了个调试断点,查看 context
});
}
对比发现
外部的 context
树结构中存在 MaterialApp
内部的 context
树结构中 不
存在 MaterialApp
- 3.封装返回按钮时,把外部的
context
传入,在内部使用
import 'package:flutter/material.dart';
class JHBackButton extends StatelessWidget {
const JHBackButton({Key? key, required BuildContext context})
: _scontext = context,
super(key: key);
final BuildContext _scontext;
@override
Widget build(BuildContext context) {
return BackButton(onPressed: () {
Navigator.pop(_scontext); // 在这行打了个调试断点,查看 context
});
}
}
再次打断点调试,查看 context
这会跟第一张图上的就匹配
了
搞定!