Flutter底部导航BottomNavigationBar：BottomNavigationBar实现页面的切换效果

描述：

通过底部导航BottomNavigationBar：BottomNavigationBar实现页面的切换效果

效果图：

方案1 :

pageView和 _pageCtr.jumpToPage(index)结合,效果只初始当前页面的索引页，其他页面需要触发之后才会渲染

方案2 :

IndexedStack ,效果初始化所有页面

代码：

class TabNav extends StatefulWidget {
  const TabNav({Key? key}) : super(key: key);

  @override
  State<TabNav> createState() => _TabNavState();
}

class _TabNavState extends State<TabNav> {
  // 当前页面索引
  int _curIndex = 0;
  // body界面
  final List<Widget> _pages = const [
    HomePage(),
    NewsPage(),
    PractticePage(),
    ProfilePage()
  ];

  // 页面控制器
  final PageController _pageCtr = PageController();
  @override
  void dispose() {
    _pageCtr.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 方案1:pageView,只初始当前页面的索引页
      // body: PageView(
      //   physics: const NeverScrollableScrollPhysics(),
      //   controller: _pageCtr,
      //   children: _pages,
      // ),

      //方案2:IndexedStack,初始化所有页面
      body: IndexedStack(
        children: _pages,
        index: _curIndex,
      ),
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        selectedFontSize: 11,
        unselectedFontSize: 11,
        selectedItemColor: Colors.teal,
        unselectedItemColor: Colors.grey,
        items: const [
          BottomNavigationBarItem(
            icon: Icon(Icons.home_filled, color: Colors.grey),
            activeIcon: Icon(Icons.home_filled, color: Colors.teal),
            label: "首页",
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.messenger_sharp, color: Colors.grey),
            activeIcon: Icon(Icons.messenger_sharp, color: Colors.teal),
            label: "消息",
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.menu_book_rounded, color: Colors.grey),
            activeIcon: Icon(Icons.menu_book_rounded, color: Colors.teal),
            label: "案例",
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person_pin_circle_sharp, color: Colors.grey),
            activeIcon: Icon(Icons.person_pin_circle_sharp, color: Colors.teal),
            label: "我的",
          ),
        ],
        currentIndex: _curIndex,
        onTap: (int index) {
          // 结合方案1使用
          // setState(() {
          //   _pageCtr.jumpToPage(index);
          //   _curIndex = index;
          // });

          // 结合方案2使用
          setState(() {
            _curIndex = index;
          });
        },
      ),
    );
  }
}

束语：

当我们在_pages数组中的页面初始化出添加输出打印，通过底部导航切换，方案一点击时会看到当前跳转的页面初始化，方案二则会在首次加载的时候初始化所有的_pages页面.