Flutter 导航返回按钮

二级页面的返回按钮

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

这会跟第一张图上的就匹配了
搞定！

---

小编辑器

一个字：小巧

---