BottomNavigationBar 无需一次加载所有页面

Question

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

一切都很好，除了所有四个页面都是同时创建的，加载的数据相当繁重，并使应用程序减慢了几秒钟。

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

Answer 1

我建议删除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