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​

​