Flutter底部导航栏点击重载WebView及全局刷新功能实现问题

实现步骤 #

第一步：统一改造所有WebView页面（HomeClass、ProfileClass、CartClass）

三个WebView页面都需要做相同改造，以HomeClass为例：

1. 给页面类增加支持传入key的构造方法
2. 给状态类新增公开的reload刷新方法

class HomeClass extends StatefulWidget {
  // 新增构造方法支持传key
  const HomeClass({super.key});
  @override
  Homestate createState() => Homestate();
}

class Homestate extends State<HomeClass> with TickerProviderStateMixin{
  // ... 原有代码不变

  // 新增刷新方法
  void reload() {
    _controller.reload();
  }

  // ... 原有代码不变
}

注意：ProfileClass、CartClass要和上述逻辑保持一致，分别给自身的状态类添加reload方法，同时构造方法支持传入key

第二步：改造main.dart中的WebViewState逻辑

class WebViewState extends State<WebViewClass> with TickerProviderStateMixin{
 
  @override
   void initState() {
     super.initState();
    if (Platform.isAndroid) WebView.platform = SurfaceAndroidWebView();
   }

  int currentIndex = 0;
  // 新增三个GlobalKey，用于获取对应WebView页面的状态
  final GlobalKey<Homestate> homeKey = GlobalKey();
  // 注意替换成你自己ProfileClass实际的状态类名
  final GlobalKey<ProfileState> profileKey = GlobalKey();
  // 注意替换成你自己CartClass实际的状态类名
  final GlobalKey<CartState> cartKey = GlobalKey();

  @override
  Widget build(BuildContext context) {

     final screens = [
        HomeClass(key: homeKey),
        // 刷新按钮位不需要实际页面，换成空组件
        const SizedBox.shrink(),
        ProfileClass(key: profileKey),
        CartClass(key: cartKey)
     ];


    return  Scaffold(
          resizeToAvoidBottomInset: true,
          appBar: null,
          body: SafeArea(
            child: screens[currentIndex]
          ),
         bottomNavigationBar: BottomNavigationBar(
            currentIndex: currentIndex,
            selectedItemColor: Colors.white,
            unselectedItemColor: Colors.white60,
            // 替换原有onTap逻辑
            onTap: (index) {
              // 点击的是刷新按钮
              if (index == 1) {
                switch(currentIndex) {
                  case 0:
                    homeKey.currentState?.reload();
                    break;
                  case 2:
                    profileKey.currentState?.reload();
                    break;
                  case 3:
                    cartKey.currentState?.reload();
                    break;
                }
                return;
              }
              // 点击的是其他导航按钮
              if (index == currentIndex) {
                // 重复点击已选中tab，触发重载
                switch(index) {
                  case 0:
                    homeKey.currentState?.reload();
                    break;
                  case 2:
                    profileKey.currentState?.reload();
                    break;
                  case 3:
                    cartKey.currentState?.reload();
                    break;
                }
              } else {
                // 切换不同tab
                setState(() {
                  currentIndex = index;
                });
              }
            },
            items: const [
                  BottomNavigationBarItem(
                  icon: Icon(CupertinoIcons.home),
                  label: 'Home',
                  backgroundColor: Colors.pink       
                ),
                BottomNavigationBarItem(
                  icon: Icon(CupertinoIcons.refresh),
                  label: 'Refresh',
                  backgroundColor: Colors.pink
                ),
                BottomNavigationBarItem(
                  icon: Icon(CupertinoIcons.profile_circled),
                  label: 'Profile',
                  backgroundColor: Colors.pink
                ),
                 BottomNavigationBarItem(
                  icon: Icon(CupertinoIcons.cart),
                  label: 'Cart',
                  backgroundColor: Colors.pink
                )
            ],

        ) ,
    );
  }
}

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