Flutter WebView：保留组件状态避免重复加载问题

你提到的AutomaticKeepAliveClientMixin确实只适配PageView这类页面切换场景，Navigator路由栈的页面默认会在pop后销毁状态，得换个思路解决：

方案一：缓存WebView页面实例 #

在父页面中保存WebView页面的实例，每次跳转时复用这个实例，避免重新创建导致WebView加载：

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  // 缓存WebView页面实例
  WebViewPage? _cachedWebView;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('主页')),
      body: Center(
        child: ElevatedButton(
          onPressed: () async {
            // 首次创建后缓存，后续复用
            _cachedWebView ??= WebViewPage();
            await Navigator.push(
              context,
              MaterialPageRoute(builder: (_) => _cachedWebView!),
            );
          },
          child: const Text('打开WebView'),
        ),
      ),
    );
  }
}

class WebViewPage extends StatefulWidget {
  @override
  _WebViewPageState createState() => _WebViewPageState();
}

class _WebViewPageState extends State<WebViewPage> {
  late WebViewController _controller;

  @override
  void initState() {
    super.initState();
    // 仅初始化一次WebViewController
    _controller = WebViewController()
      ..loadRequest(Uri.parse('https://example.com'));
  }

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

方案二：全局复用WebViewController #

把WebViewController抽成全局变量，WebView页面始终使用这个全局控制器，即使页面重建也能保留加载状态：

// 全局WebViewController，仅初始化一次
final globalWebController = WebViewController()
  ..loadRequest(Uri.parse('https://example.com'));

class WebViewPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('WebView')),
      body: WebViewWidget(controller: globalWebController),
    );
  }
}

// 父页面跳转逻辑无需缓存页面，直接push即可
class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('主页')),
      body: Center(
        child: ElevatedButton(
          onPressed: () => Navigator.push(
            context,
            MaterialPageRoute(builder: (_) => WebViewPage()),
          ),
          child: const Text('打开WebView'),
        ),
      ),
    );
  }
}

原理说明 #

Navigator.push默认每次都会创建新的页面实例并初始化State，导致WebView重新加载。上面两种方案本质都是保留WebView的核心控制器实例：

• 方案一通过缓存整个页面实例，让State不会被销毁；
• 方案二通过全局控制器，即使页面重建也复用已加载的控制器状态。

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