Flutter 导航返回按钮-摩杜云开发者社区

二级页面的返回按钮

Flutter 版本：2.5.1 二级页面的返回按钮，是空的，只能左滑返回。

Flutter 导航返回按钮_html5

自定义一个返回按钮：

@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(),
      ),
    );
  }

Flutter 导航返回按钮_返回按钮_02

2.封装返回按钮时，打调试断点，查看context

@override
  Widget build(BuildContext context) {
    return BackButton(onPressed: () {
      Navigator.pop(context); // 在这行打了个调试断点，查看 context
    });
  }

Flutter 导航返回按钮_返回按钮_03

对比发现

外部的 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

Flutter 导航返回按钮_返回按钮_04

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

搞定！