iPad SplitScreens双Navigator场景下，如何仅在指定Navigator显示Snackbar？

问题场景 #

在iPad的SplitScreen布局中，使用两个独立的Navigator并排展示页面，但调用其中一个Navigator对应的上下文显示Snackbar时，两个Navigator的屏幕中都会出现Snackbar，需要实现仅在目标Navigator的屏幕内显示。

问题原因 #

你当前使用NavigatorState的上下文调用Snackbar，这个上下文属于Navigator组件本身，而非其内部页面的Scaffold。若两个Navigator共享根级的ScaffoldMessenger，就会导致Snackbar被广播到所有关联的Scaffold中。

解决方案 #

方法1：给目标Scaffold指定独立的ScaffoldMessengerKey #

1. 定义全局的ScaffoldMessengerState key：

GlobalKey<ScaffoldMessengerState> secondScaffoldMessengerKey = GlobalKey<ScaffoldMessengerState>();

2. 在第二个Navigator的页面Scaffold中绑定该key：

SplitView(
  menu: Navigator(
    key: firstSplitNavigatorKey,
    onGenerateRoute: (routeSettings) {
      return MaterialPageRoute(
        builder: (context) => const KursplanungScreen(title: 'Demo App'),
      );
    },
  ),
  content: Navigator(
    key: secondSplitNavigatorKey,
    onGenerateRoute: (routeSettings) {
      return MaterialPageRoute(
        builder: (context) => Scaffold(
          // 绑定独立的ScaffoldMessengerKey
          scaffoldMessengerKey: secondScaffoldMessengerKey,
          body: const Center(
            child: Text("Herzlich Willkommen!")
          ),
        ),
      );
    },
  ),
  menuWidth: 300,
),

3. 通过该key调用Snackbar：

ElevatedButton(
  onPressed: () {
    secondScaffoldMessengerKey.currentState?.showSnackBar(
      SnackBar(content: Text("Bitte tragen Sie einen Fachnamen ein!")),
    );
  },
  child: const Icon(Icons.add),
),

方法2：直接使用页面内Scaffold的上下文 #

如果可以在第二个Navigator的页面内部触发Snackbar，直接使用当前页面的上下文即可：

// 在第二个Navigator的页面中
ElevatedButton(
  onPressed: () {
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(content: Text("Bitte tragen Sie einen Fachnamen ein!")),
    );
  },
  child: const Icon(Icons.add),
),

这样就能确保Snackbar仅在当前页面的Scaffold中显示，不会影响另一个Navigator的页面。

内容的提问来源于stack exchange，提问作者SwiftiSwift