ScaffoldMessenger 不会隐藏导航器弹出窗口中的小吃栏

Question

当我使用旧的 api 来显示小吃栏时，当用户返回到上一页时，小吃栏就会消失。

在新版本中ScaffoldMessenger.of(context).showSnackBar()，小吃栏保持可见。

另外，当我添加用于删除小吃栏的小吃栏操作时，按下该hide操作，返回上一页后不会隐藏小吃栏。

用户离开当前页面后如何删除小吃栏？

void _successSnackbar(BuildContext context, String message) {
  ScaffoldMessenger.of(context).hideCurrentSnackBar();

  ScaffoldMessenger.of(context).showSnackBar(
    SnackBar(
      content: Row(
        children: [
          Icon(FontAwesomeIcons.checkCircle, color: Colors.green[400], size: 35),
          const SizedBox(width: 15),
          Flexible(child: Text(message, style: TextStyle(color: Colors.green[400], fontSize: 14.5))),
        ],
      ),
      action: SnackBarAction(
        label: 'Hide',
        onPressed: () {
          ScaffoldMessenger.of(context).hideCurrentSnackBar();
        },
      ),
      duration: Duration(seconds: 2),
    ),
  );

Answer 1

您可以从官方文档
https://flutter.dev/docs/release/writing-changes/scaffold-messenger 中复制粘贴运行完整代码， 该代码创建了一个范围，所有后代 Scaffold 在其中注册接收，这就是它们在跨域中持久存在的方式这些转换 因此在您的情况下，由让所有后代接收提供的根

ScaffoldMessengerSnackBars
ScaffoldMessengerMaterialAppScaffoldsSnackBars

除非在树的更下方创建
新范围，否则解决方案。ScaffoldMessenger通过实例化您自己的ScaffoldMessenger，您可以控制哪些脚手架接收要在从第二页弹出时SnackBars
自动隐藏，您可以在第二页中换行 ，在我的示例中还需要SnackBarScaffoldScaffoldMessengerBuilder

代码片段在Page2

Widget build(BuildContext context) {
    return ScaffoldMessenger(
      child: Scaffold(
         ...
            child: Column(
              children: [
                Text("Second route"),
                Builder(builder: (BuildContext context) {
                  return ElevatedButton(
                      onPressed: () {
                        _successSnackbar(context, "messge of page 2");
                      },
                      child: Text('show message'));
                }),

工作演示

完整代码

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Page 1',
            ),
            ElevatedButton(
                onPressed: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => Page2()),
                  );
                },
                child: Text('Go to page 2'))
          ],
        ),
      ),
    );
  }
}

class Page2 extends StatefulWidget {
  @override
  _Page2State createState() => _Page2State();
}

class _Page2State extends State<Page2> {
  void _successSnackbar(BuildContext context, String message) {
    ScaffoldMessenger.of(context).hideCurrentSnackBar();

    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(
        content: Row(
          children: [
            Icon(Icons.check, color: Colors.green[400], size: 35),
            const SizedBox(width: 15),
            Flexible(
                child: Text(message,
                    style:
                        TextStyle(color: Colors.green[400], fontSize: 14.5))),
          ],
        ),
        action: SnackBarAction(
          label: 'Hide',
          onPressed: () {
            ScaffoldMessenger.of(context).hideCurrentSnackBar();
          },
        ),
        duration: Duration(seconds: 20),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return ScaffoldMessenger(
      child: Scaffold(
          appBar: AppBar(
            title: Text("page 2"),
          ),
          body: Center(
            child: Column(
              children: [
                Text("Second route"),
                Builder(builder: (BuildContext context) {
                  return ElevatedButton(
                      onPressed: () {
                        _successSnackbar(context, "messge of page 2");
                      },
                      child: Text('show message'));
                }),
                ElevatedButton(
                    onPressed: () {
                      Navigator.pop(
                        context,
                      );
                    },
                    child: Text('Pop'))
              ],
            ),
          )),
    );
  }
}