Flutter WebView如何仅加载一次并保留状态？

下面是几种可行的实现方式，按需选择：

1. 使用AutomaticKeepAliveClientMixin #

这是Flutter官方提供的保持页面状态的方案，适合单个页面需要保留状态的场景。

在WebView所在页面的State类中混入该Mixin，并实现wantKeepAlive返回true，同时在build方法中必须调用super.build(context)：

class WebViewPage extends StatefulWidget {
  const WebViewPage({super.key});

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

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

  @override
  void initState() {
    super.initState();
    _controller = WebViewController()
      ..loadRequest(Uri.parse('https://example.com'));
  }

  // 必须实现这个方法，返回true表示需要保留状态
  @override
  bool get wantKeepAlive => true;

  @override
  Widget build(BuildContext context) {
    // 必须调用super.build，否则状态不会被保留
    super.build(context);
    return Scaffold(
      body: WebViewWidget(controller: _controller),
    );
  }
}

2. 使用IndexedStack管理页面 #

如果是底部导航栏或类似的多页面切换场景，用IndexedStack包裹所有页面，它会将所有子页面保持在内存中，切换时不会销毁旧页面，自然就能保留WebView的状态。

示例代码：

class MainPage extends StatefulWidget {
  const MainPage({super.key});

  @override
  State<MainPage> createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  int _currentIndex = 0;

  // 提前初始化所有页面，IndexedStack会保持它们的状态
  final List<Widget> _pages = const [
    HomePage(),
    WebViewPage(), // 这里就是需要保留状态的WebView页面
    ProfilePage(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: IndexedStack(
        index: _currentIndex,
        children: _pages,
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        onTap: (index) {
          setState(() {
            _currentIndex = index;
          });
        },
        items: const [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: '首页'),
          BottomNavigationBarItem(icon: Icon(Icons.web), label: '网页'),
          BottomNavigationBarItem(icon: Icon(Icons.person), label: '我的'),
        ],
      ),
    );
  }
}

3. 缓存WebViewController实例 #

如果页面是通过路由跳转的，可以将WebViewController的实例缓存到父页面或全局状态管理类中（比如Provider、GetX等），每次进入WebView页面时复用同一个控制器，避免重新加载页面。

示例（用全局变量简单演示，实际项目建议用状态管理）：

// 全局缓存控制器
WebViewController? _cachedWebController;

class WebViewPage extends StatefulWidget {
  const WebViewPage({super.key});

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

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

  @override
  void initState() {
    super.initState();
    // 如果已有缓存的控制器，直接复用
    _controller = _cachedWebController ?? WebViewController()
      ..loadRequest(Uri.parse('https://example.com'));
    // 缓存控制器
    _cachedWebController = _controller;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: WebViewWidget(controller: _controller),
    );
  }
}

注意：如果使用全局缓存，记得在不需要的时候（比如退出App）清理控制器，避免内存泄漏。

内容的提问来源于stack exchange，提问作者Nitin Kumar Ahirwar