Flutter bottomNavigationBar切换widget页面后重复创建widget的问题

最新推荐文章于 2025-06-13 09:44:22 发布

米小豆361

最新推荐文章于 2025-06-13 09:44:22 发布

阅读量6.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： android flutter 文章标签： flutter

本文链接：https://blog.youkuaiyun.com/zxwd2015/article/details/89213009

android 同时被 2 个专栏收录

168 篇文章

订阅专栏

flutter

3 篇文章

订阅专栏

本文介绍在Flutter中使用bottomNavigationBar与pageView进行页面切换时遇到的重复创建问题及解决方案，包括使用AutomaticKeepAliveClientMixin和CupertinoTabScaffold避免页面重复加载，减少不必要的网络请求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题描述：使用 bottomNavigationBar +pageView切换页面，切换第二个页面后再次切换第一个页面，发现重复创建触发了网路请求，好坑！

Widget build(BuildContext context) {
    return Scaffold(
      body: PageView.builder(
        controller: _pageController,
        itemCount: _bodyList.length,
        itemBuilder: (BuildContext context, int index) {
          return _bodyList[index];
        },
      ),
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        onTap: (index) {
          //点击触发 切换 currentIndex;
          setState(() {
            _currentNavigationBarItem = index;
          });
          _pageController.animateToPage(index,
              duration: Duration(microseconds: 1), curve: Curves.ease);
        },
        currentIndex: _currentNavigationBarItem,
        items: _bottomNavigationBarItemList,
      ),
    );
  }

解决方法1: pageveiw的children 实现 AutomaticKeepAliveClientMixin (官方推荐做法); 参考掘金

解决方法2：使用 CupertinoTabScaffold;

因为苹果风格的TabScaffold(脚手架)构建时指定了tab页面，没有切换页面后重复创建的问题；

@override
  Widget build(BuildContext context) {
    return CupertinoTabScaffold(
        tabBar: CupertinoTabBar(
          items: [
            buildBottomNavigationBarItem(
                "首页",
                "assets/images/ic_tab_fortune_normal.png",
                "assets/images/ic_tab_fortune_selected.png"),
            buildBottomNavigationBarItem(
                "视频",
                "assets/images/ic_tab_video_normal.png",
                "assets/images/ic_tab_video_selected.png"),
            buildBottomNavigationBarItem(
                "热销",
                "assets/images/ic_tab_hot_normal.png",
                "assets/images/ic_tab_hot_selected.png"),
            buildBottomNavigationBarItem(
                "自选",
                "assets/images/ic_tab_chosen_normal.png",
                "assets/images/ic_tab_chosen_selected.png"),
            buildBottomNavigationBarItem(
                "我的",
                "assets/images/ic_tab_mine_normal.png",
                "assets/images/ic_tab_mine_selected.png"),
          ],
        ),
        tabBuilder: (BuildContext context, int index) {
          switch (index) {
            case 0:
              return MainPage();
              break;
            case 1:
              return VideoPage();
              break;
            case 2:
              return HotSalePage();
              break;
            case 3:
              return SelectPage();
              break;
            case 4:
              return MinePage();
              break;
          }
        });
  }