Flutter多WebView切换BottomNavigationBar时重复加载问题求助

嗨，我仔细看了你的代码和遇到的问题，发现几个导致WebView切换异常的核心问题，下面给你逐一拆解并提供修正方案：

问题根源 #

1. StatefulWidget缺少唯一标识：你在_widgetOptions列表里的两个WebViewContainer没有设置唯一Key。Flutter的Widget树diff算法会根据位置判断是否复用State，当你在第一、第二个标签页之间切换时，Flutter错误地复用了之前的WebView状态，导致显示的始终是最后加载的URL。
2. State参数传递方式错误：你在_WebViewContainerState的构造函数里直接接收并存储了url参数，而不是通过widget.url访问父Widget的属性。State的构造函数只会在创建时执行一次，后续Widget更新时无法同步最新的参数变化。
3. 嵌套Scaffold导致布局混乱：WebViewContainer内部返回了Scaffold，但你的Home页面已经有一个顶层Scaffold，嵌套会干扰Widget树的状态管理，也会导致不必要的布局层级问题。

修正后的代码 #

1. 调整Home类（添加唯一Key） #

给每个WebViewContainer设置独立的UniqueKey，确保Flutter能准确区分不同的Widget实例：

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'web_view_container.dart';

class Home extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _HomeState();
  }
}

class _HomeState extends State<Home> {
  int _selectedIndex = 0;
  static const TextStyle optionStyle = TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
  List<Widget> _widgetOptions = <Widget>[
    // 给每个WebViewContainer添加唯一Key
    WebViewContainer('https://offerscouponsdeals.in/', key: UniqueKey()),
    WebViewContainer('https://flutter.io', key: UniqueKey()),
    Text(
      'Index 2: School',
      style: optionStyle,
    ),
  ];

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('RSVP App'),
      ),
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: Text('Home'), // 新版本Flutter推荐用label替代title
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.business),
            label: Text('Business'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.school),
            label: Text('School'),
          ),
        ],
        currentIndex: _selectedIndex,
        onTap: _onItemTapped,
      ),
    );
  }

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }
}

2. 重构WebViewContainer类（修正参数获取与布局） #

去掉嵌套的Scaffold，通过widget.url获取最新URL，同时调整State的创建逻辑：

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class WebViewContainer extends StatefulWidget {
  final String url;
  // 接收外部传入的Key
  const WebViewContainer(this.url, {super.key});

  @override
  State<WebViewContainer> createState() => _WebViewContainerState();
}

class _WebViewContainerState extends State<WebViewContainer> {
  final _key = UniqueKey();
  num _stackToView = 1;

  void _handleLoad(String value) {
    setState(() {
      _stackToView = 0;
    });
  }

  @override
  Widget build(BuildContext context) {
    // 直接返回核心布局，不再嵌套Scaffold
    return IndexedStack(
      index: _stackToView,
      children: [
        Column(
          children: <Widget>[
            Expanded(
              child: WebView(
                key: _key,
                javascriptMode: JavascriptMode.unrestricted,
                // 通过widget.url获取当前实例的URL
                initialUrl: widget.url,
                onPageFinished: _handleLoad,
              )
            ),
          ],
        ),
        Container(
          color: Colors.white,
          child: const Center(
            child: CircularProgressIndicator(),
          ),
        ),
      ]
    );
  }
}

额外提示 #

如果你希望切换标签页时WebView能保留之前的加载状态（比如滚动位置、已加载内容），可以给WebViewContainer的State混入AutomaticKeepAliveClientMixin，重写wantKeepAlive返回true，这样就能避免重复加载URL。如果不需要保留状态，上面的修改已经能完全解决你的问题。

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