如何避免屏幕旋转时webview_flutter加载的网页出现自动重载问题？

问题根因 #

当设备屏幕方向切换时，Flutter默认会触发页面Widget树的重建，你当前代码中WebView直接写在build方法中初始化，每次重建都会重新执行WebView的构造逻辑，加载initialUrl对应的地址，就出现了自动重载的现象。

可落地解决方案 #

• 方案1：混入AutomaticKeepAliveClientMixin保留状态 #

  如果你的WebView页面是在PageView、TabBarView等可切换容器中使用，给对应State类混入AutomaticKeepAliveClientMixin，重写wantKeepAlive返回true即可，示例代码：

  class WebViewPage extends StatefulWidget {
    final String link;
    const WebViewPage({super.key, required this.link});
  
    @override
    State<WebViewPage> createState() => _WebViewPageState();
  }
  
  class _WebViewPageState extends State<WebViewPage> with AutomaticKeepAliveClientMixin {
    // 重写该属性返回true，告知框架保留当前页面状态
    @override
    bool get wantKeepAlive => true;
  
    @override
    Widget build(BuildContext context) {
      // 必须调用父类build方法
      super.build(context);
      return Scaffold(
        body: WebView(
          gestureNavigationEnabled: true,
          initialUrl: widget.link,
          javascriptMode: JavascriptMode.unrestricted,
          navigationDelegate: (NavigationRequest request) {
            return NavigationDecision.prevent;
          },
        )
      );
    }
  }
  

• 方案2：使用GlobalKey缓存WebView实例 #

  如果是单独的WebView页面，给WebView设置全局唯一的GlobalKey，强制Flutter在Widget树重建时复用同一个WebView实例，不会重新初始化：

  class WebViewPage extends StatefulWidget {
    final String link;
    const WebViewPage({super.key, required this.link});
  
    @override
    State<WebViewPage> createState() => _WebViewPageState();
  }
  
  class _WebViewPageState extends State<WebViewPage> {
    // 定义WebView专属的GlobalKey
    final webViewKey = GlobalKey();
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        body: WebView(
          key: webViewKey, // 绑定key
          gestureNavigationEnabled: true,
          initialUrl: widget.link,
          javascriptMode: JavascriptMode.unrestricted,
          navigationDelegate: (NavigationRequest request) {
            return NavigationDecision.prevent;
          },
        )
      );
    }
  }
  

• 方案3：Android端额外补充配置 #

  部分Android设备上还需要修改原生配置，告知系统方向、屏幕尺寸变化时不需要重建Activity，找到android/app/src/main/AndroidManifest.xml，给WebView所在的Activity标签添加android:configChanges属性：

  <activity
      android:name=".MainActivity"
      android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
      android:hardwareAccelerated="true"
      android:windowSoftInputMode="adjustResize">
  

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