无需一次加载所有页面的BottomNavigationBar

如何解决无需一次加载所有页面的BottomNavigationBar

我有一个带有 BottomNavigationBar 和 IndexedStack 的屏幕，它根据底部栏索引交换子视图。

一切正常，除了所有四个页面都是同时创建的，加载它们的数据非常繁重，并且会降低应用程序的速度。

是否有设置允许我仅在点击相应选项卡时加载每个页面？

解决方法

我建议删除 IndexedStack 并制作小部件列表并根据索引呈现数据。

List<Widget> _pages = [Home(),Business(),School()];

在底部导航容器小部件上创建 Provider/Bloc 实例

return MultiProvider(
   providers [
     Provider<Something>(create: (_) => Something()),],child :Scaffold(
      appBar: AppBar(
        title: const Text('BottomNavigationBar Sample'),),body: _pages[_selectedIndex],bottomNavigationBar: BottomNavigationBar(
    items: const <BottomNavigationBarItem>[
      BottomNavigationBarItem(
        icon: Icon(Icons.home),label: 'Home',BottomNavigationBarItem(
        icon: Icon(Icons.business),label: 'Business',BottomNavigationBarItem(
        icon: Icon(Icons.school),label: 'School',currentIndex: _selectedIndex,selectedItemColor: Colors.amber[800],onTap: _onItemTapped,)
)

在每个页面绑定provider的consumer，调用provider中的api