Flutter WebView：URL导航触发事件、显示SnackBar及添加导航按钮

一、导航到特定URL时显示SnackBar #

通过WebViewController的NavigationDelegate监听导航请求，匹配目标URL时触发SnackBar。建议将控制器初始化移至initState，确保BuildContext在回调中可用：

class WebViewPage extends StatefulWidget {
  final String returnUrl;
  const WebViewPage({super.key, required this.returnUrl});

  @override
  State<WebViewPage> createState() => _WebViewPageState();
}

class _WebViewPageState extends State<WebViewPage> {
  late final WebViewController _webViewController;

  @override
  void initState() {
    super.initState();
    _webViewController = WebViewController()
      ..enableZoom(false)
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..setNavigationDelegate(NavigationDelegate(
        onNavigationRequest: (request) {
          if (request.url.startsWith(widget.returnUrl)) {
            // 触发SnackBar提示
            ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(content: Text('已导航到目标地址: ${request.url}')),
            );
            return NavigationDecision.prevent; // 阻止默认导航行为
          }
          return NavigationDecision.navigate; // 允许其他正常导航
        },
      ))
      ..loadRequest(Uri.parse('https://google.com/'));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Web View')),
      body: WebViewWidget(controller: _webViewController),
    );
  }
}

核心要点：

• 控制器初始化放在initState中，避免build方法重复创建，保证context有效
• onNavigationRequest回调中匹配URL前缀，触发SnackBar后可选择阻止或允许导航

二、添加按钮实现页面内导航切换 #

通过在界面中添加操作按钮，调用WebViewController的内置方法实现前进、后退或跳转指定URL：

示例：在AppBar集成导航按钮 #

修改build方法如下：

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: const Text('Web View'),
      actions: [
        // 后退按钮
        IconButton(
          icon: const Icon(Icons.arrow_back),
          onPressed: () async {
            if (await _webViewController.canGoBack()) {
              await _webViewController.goBack();
            } else {
              ScaffoldMessenger.of(context).showSnackBar(
                const SnackBar(content: Text('已处于页面最前端')),
              );
            }
          },
        ),
        // 前进按钮
        IconButton(
          icon: const Icon(Icons.arrow_forward),
          onPressed: () async {
            if (await _webViewController.canGoForward()) {
              await _webViewController.goForward();
            } else {
              ScaffoldMessenger.of(context).showSnackBar(
                const SnackBar(content: Text('已处于页面最后端')),
              );
            }
          },
        ),
        // 跳转指定URL按钮
        IconButton(
          icon: const Icon(Icons.open_in_new),
          onPressed: () {
            _webViewController.loadRequest(Uri.parse('https://flutter.dev/'));
          },
        ),
      ],
    ),
    body: WebViewWidget(controller: _webViewController),
  );
}

核心要点：

• 使用canGoBack()/canGoForward()判断是否支持前进/后退操作
• 调用goBack()/goForward()实现历史页面导航
• 调用loadRequest()直接加载新URL实现页面切换

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