Flutter 基于BottomNavigation+PageView实现底部导航功能

class BottomNavigator extends StatefulWidget {
  @override
  _BottomNavigatorState createState() => _BottomNavigatorState();
}

class _BottomNavigatorState extends State<BottomNavigator> {
  final _defaultColor = Colors.grey;
  final _activeColor = primary;
  int _currentIndex = 0;
  final PageController _controller = new PageController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageView(
        controller: _controller,
        children: [HomePage(), HomePage(), HomePage(), HomePage()],
        onPageChanged: (index) {
          // 监听页面切换，实现和BottomNavigationBar 联动效果
          setState(() {
            _currentIndex = index;
          });
        },
        physics: NeverScrollableScrollPhysics(), // 禁止 PageView 滑动
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        onTap: (index) {
          // 监听 navigation 点击事件
          _controller.jumpToPage(index); // PageView 展示对应 Tab
          setState(() {
            _currentIndex = index; // 更新选中的Tab位置
          });
        },
        selectedItemColor: _activeColor,
        items: [
          _bottomItem('首页', Icons.home, 0),
          _bottomItem('排行', Icons.local_fire_department, 1),
          _bottomItem('收藏', Icons.favorite, 2),
          _bottomItem('我的', Icons.live_tv, 3),
        ],
        type: BottomNavigationBarType.fixed, // 设置未选中也能显示标题
      ),
    );
  }

  // 封装 BottomNavigationBarItem
  _bottomItem(String title, IconData icon, int index) {
    return BottomNavigationBarItem(
        icon: Icon(
          icon,
          color: _defaultColor,
        ),
        label: title);
  }
}