如何确保Flutter WebView的onUrlChange在页面跳转时仅调用一次？

问题场景 #

从Home页面通过Navigator push跳转到WebViewPage时，onUrlChange会被调用两次，导致后续关联的组件逻辑重复执行。

解决方案 #

添加一个状态变量标记是否已执行过目标逻辑，仅在首次触发且URL匹配预期时执行操作：

修改WebViewPage的状态类代码如下：

class _WebViewState extends State<WebViewPage> {
  final Completer<WebViewController> _controller = Completer<WebViewController>();
  late WebViewController _webViewController;
  // 标记是否已执行过业务逻辑
  bool _hasExecutedAction = false;

  @override
  void initState() {
    super.initState();
    _webViewController = WebViewController()  
      ..setNavigationDelegate(
        NavigationDelegate(
          onWebResourceError: (WebResourceError error) {},
          onUrlChange: (UrlChange change) async {
            try {
              // 仅当未执行过逻辑，且当前URL为目标URL时触发
              if (!_hasExecutedAction && change.url == widget._url) {
                // 在这里执行你的业务逻辑
                // Do something at here

                // 标记为已执行，避免重复触发
                setState(() {
                  _hasExecutedAction = true;
                });
              }
            } catch (e) {
              print('Error during navigation: $e');
            }
          },
        ),
      )
      ..loadRequest(Uri.parse(widget._url));
  }
}

补充说明 #

如果目标URL存在重定向场景，可以调整判断逻辑（比如检查URL包含目标域名），或者改用onPageFinished回调替代onUrlChange——onPageFinished会在页面完全加载完成后触发一次，更适合页面加载完成后的一次性操作：

// 使用onPageFinished的示例
..setNavigationDelegate(
  NavigationDelegate(
    onWebResourceError: (WebResourceError error) {},
    onPageFinished: (String url) async {
      try {
        // 页面加载完成后执行一次逻辑
        // Do something at here
      } catch (e) {
        print('Error during navigation: $e');
      }
    },
  ),
)

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