Flutter中SnackBar显示方法及无网络时触发实现方案

嘿，我来帮你搞定这两个Flutter SnackBar的问题～

现在Flutter官方推荐用ScaffoldMessenger来管理SnackBar，它比旧版的Scaffold.of(context)更稳定，尤其是在页面路由切换时不会出问题。

基本的实现步骤很简单，只需要获取当前的BuildContext，然后调用ScaffoldMessenger的showSnackBar方法就行。举个实际的例子，比如在按钮点击事件里触发：

ElevatedButton(
  onPressed: () {
    // 显示SnackBar
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(
        content: const Text('这是一个基础的SnackBar提示！'),
        duration: const Duration(seconds: 3), // 可选：设置显示时长，默认是4秒
        backgroundColor: Colors.blueGrey, // 可选：自定义背景色
        action: SnackBarAction(
          label: '关闭',
          textColor: Colors.white,
          onPressed: () {
            // 手动关闭SnackBar
            ScaffoldMessenger.of(context).hideCurrentSnackBar();
          },
        ),
      ),
    );
  },
  child: const Text('点击显示SnackBar'),
)

你可以根据需求自定义SnackBar的样式，比如添加阴影、设置边距，甚至用SnackBar.content传入复杂的Widget（比如包含图标和文本的Row）。

看了你的checkStatus函数，要在无网络的else分支显示SnackBar，核心是要确保你有可用的BuildContext，或者用全局Key来管理ScaffoldMessenger。下面给你两种可行的实现方式：

方式一：传入BuildContext #

直接把当前页面的context传到checkStatus函数里，这样就能调用ScaffoldMessenger了。修改后的代码如下：

// 假设这是在StatefulWidget的State类中
Future<void> checkStatus(ConnectivityResult result, BuildContext context) async { 
  if(result == ConnectivityResult.mobile || result == ConnectivityResult.wifi) { 
    changeValues("Connected"); 
  } else { 
    // 显示无网络提示的SnackBar
    ScaffoldMessenger.of(context).showSnackBar(
      const SnackBar(
        content: Text('网络连接已断开，请检查你的网络设置！'),
        backgroundColor: Colors.redAccent,
        duration: Duration(seconds: 4),
      ),
    );
  } 
}

⚠️ 注意：如果是通过Connectivity的监听回调调用这个函数，一定要确保当前页面还没被销毁（避免context失效报错），可以加个mounted判断：

// 监听网络状态变化的示例
Connectivity().onConnectivityChanged.listen((result) {
  // 只有当页面还处于活跃状态时才调用
  if(mounted) {
    checkStatus(result, context);
  }
});

方式二：使用GlobalKey（无需传context） #

如果你不想到处传context，或者需要在没有直接context的地方（比如全局的网络工具类）显示SnackBar，可以用GlobalKey<ScaffoldMessengerState>来全局管理：

1. 首先在你的State类中定义全局Key：

final GlobalKey<ScaffoldMessengerState> _scaffoldMessengerKey = GlobalKey<ScaffoldMessengerState>();

2. 在页面的ScaffoldMessenger中绑定这个Key：

@override
Widget build(BuildContext context) {
  return ScaffoldMessenger(
    key: _scaffoldMessengerKey,
    child: Scaffold(
      appBar: AppBar(title: const Text('网络状态检测')),
      body: // 你的页面内容
    ),
  );
}

3. 然后修改你的checkStatus函数，直接用全局Key调用：

Future<void> checkStatus(ConnectivityResult result) async { 
  if(result == ConnectivityResult.mobile || result == ConnectivityResult.wifi) { 
    changeValues("Connected"); 
  } else { 
    _scaffoldMessengerKey.currentState?.showSnackBar(
      const SnackBar(
        content: Text('网络连接已断开，请检查你的网络设置！'),
        backgroundColor: Colors.redAccent,
      ),
    );
  } 
}

这种方式更灵活，适合在全局场景下使用。

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