BottomNavigationBar是否必须使用IndexedStack？如何实现仅加载当前页面Widget的BottomNavigationBar

哈哈，这个问题我太有发言权了！当初用IndexedStack做底部导航，一启动就把所有页面的initState都跑了一遍，接口请求一堆，卡得不行。后来摸索出两个靠谱的解决方案，既能保留底部导航的状态，又能实现懒加载，给你说说：

核心思路是：用一个可空列表存储已加载的页面，初始时所有页面都是null，只有当用户切换到对应索引时，才创建并缓存该页面；同时让页面本身支持状态保留，避免切换回来时重新加载。

主页面实现代码 #

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

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

class _MainPageState extends State<MainPage> {
  int _currentIndex = 0;
  // 用可空列表缓存已加载的页面，初始长度和底部导航项一致
  List<Widget?> _pages = List.filled(3, null);

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

  Widget _buildCurrentPage() {
    // 如果当前页面未初始化，创建并缓存
    if (_pages[_currentIndex] == null) {
      switch (_currentIndex) {
        case 0:
          _pages[_currentIndex] = const HomePage();
          break;
        case 1:
          _pages[_currentIndex] = const SearchPage();
          break;
        case 2:
          _pages[_currentIndex] = const ProfilePage();
          break;
      }
    }
    // 返回当前页面，也可以加个加载占位（可选）
    return _pages[_currentIndex] ?? const Center(child: CircularProgressIndicator());
  }
}

页面状态保留设置 #

如果你的页面需要保留滚动位置、输入状态等，需要让页面的State混入AutomaticKeepAliveClientMixin：

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> with AutomaticKeepAliveClientMixin {
  // 重写该方法返回true，开启状态保留
  @override
  bool get wantKeepAlive => true;

  @override
  Widget build(BuildContext context) {
    // 必须调用super.build，否则KeepAlive不生效
    super.build(context);
    return ListView.builder(
      itemCount: 50,
      itemBuilder: (context, index) => ListTile(title: Text('首页列表项 $index')),
    );
  }
}

如果你需要支持滑动切换页面（或者习惯用PageView的逻辑），可以用这个方案：通过配置PageView禁止预加载，结合状态保留实现懒加载。

主页面实现代码 #

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

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

class _MainPageState extends State<MainPage> {
  int _currentIndex = 0;
  final PageController _pageController = PageController();

  @override
  void dispose() {
    _pageController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageView(
        controller: _pageController,
        physics: const NeverScrollableScrollPhysics(), // 禁止滑动切换，仅通过底部导航控制
        allowImplicitScrolling: false, // 禁止隐式预加载（Flutter 3.7+ 支持）
        children: const [
          HomePage(),
          SearchPage(),
          ProfilePage(),
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        onTap: (index) {
          setState(() {
            _currentIndex = index;
          });
          _pageController.jumpToPage(index);
        },
        items: const [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: '首页'),
          BottomNavigationBarItem(icon: Icon(Icons.search), label: '搜索'),
          BottomNavigationBarItem(icon: Icon(Icons.person), label: '我的'),
        ],
      ),
    );
  }
}

页面的状态保留设置和方案1完全一致，同样需要混入AutomaticKeepAliveClientMixin。

• 方案1：完全懒加载，只有用户点击过的页面才会被初始化，内存占用更低，适合页面数量较多的场景。
• 方案2：适合需要滑动切换的场景，配置简单，但要注意PageView的版本兼容（allowImplicitScrolling是3.7+新增的）。

如果你的页面不需要保留状态（比如每次进入都要刷新数据），可以去掉AutomaticKeepAliveClientMixin，每次切换时重新创建页面即可。

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