如何在Flutter Webview包中触发基于URL导航的事件

发布于11月12日

如何在用户导航到Flutter WebView中的特定URL时显示快捷栏

以及如何在Webview中添加按钮以在Webview内的页面之间导航

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Web view'),
      ),
      body: WebViewWidget(
        controller:   WebViewController()
      ..enableZoom(false)
      ..setNavigationDelegate(NavigationDelegate(
        onNavigationRequest: (request) {
          if (request.url.startsWith(widget.returnUrl)) {
            print("Hello");
            return NavigationDecision.prevent;
          }
          return NavigationDecision.navigate;
        },
      ))
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..loadRequest(
        Uri.parse('https://google.com/'),
      )
      )
    );
  }
}

推荐答案

解决方案:

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Web view'),
       leading: IconButton(
        onPressed: () {
          Navigator.of(context).pop();
        },
        icon: Icon(
          Icons.arrow_back,
          color: Theme.of(context).primaryColorDark,
        )),
      ),
      body: WebViewWidget(
      controller: WebViewController()
        ..enableZoom(false)
        ..setNavigationDelegate(NavigationDelegate(
          onNavigationRequest: (request) {
            if (request.url ==
                "https://docs.flutter.dev/get-started/install") {
              ScaffoldMessenger.of(context)
                  .showSnackBar(SnackBar(content: Text("Hello")));
              return NavigationDecision.prevent;
            }

            return NavigationDecision.navigate;
          },
        ))
        ..setJavaScriptMode(JavaScriptMode.unrestricted)
        ..loadRequest(
          Uri.parse('https://flutter.dev/'),
        ))
    );
  }
}

Result :