如何在Flutter CurvedNavigationBar中实现不同页面的路由导航

错误原因 #

• 代码中定义的_page是存储页面对象的一维列表，onTap回调中调用_page[index][1]属于非法的二维数组访问，运行会直接抛出类型异常
• 底部导航栏的常规使用逻辑是切换当前Scaffold的body内容，不需要每次点击都调用Navigator.push压入新页面，否则会导致页面栈不断叠加，底部导航栏重复出现在新页面中

修复后代码 #

class BottomNavBar extends StatefulWidget {
  @override
  _BottomNavBarState createState() => _BottomNavBarState();
}

class _BottomNavBarState extends State<BottomNavBar> {
  // 按导航项顺序存放对应页面实例，和下方items顺序一一对应
  final List<Widget> _page = [
    Add(),
    Copyright(),
    HomePage(),
  ];
  int _activePage = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        bottomNavigationBar: CurvedNavigationBar(
          index: _activePage,
          height: 60.0,
          items: <Widget>[
            Icon(Icons.add, size: 30),
            Icon(Icons.list, size: 30),
            Icon(Icons.compare_arrows, size: 30),
          ],
          color: Colors.white,
          backgroundColor: Colors.blueAccent,
          animationCurve: Curves.easeInOut,
          animationDuration: Duration(milliseconds: 600),
          // 修复onTap逻辑：更新激活索引后调用setState触发UI重绘
          onTap: (index) {
            setState(() {
              _activePage = index;
            });
          },
          letIndexChange: (index) => true,
        ),
        body: Container(
          color: Colors.blueAccent,
          child: Center(
            child: _page[_activePage],
          ),
        ));
  }
}

特殊场景适配 #

如果确实需要点击某个导航项跳转到无底部导航的独立页面，可以单独判断索引处理跳转逻辑：

onTap: (index) {
  // 示例：点击第一个添加按钮跳转到独立页面
  if(index == 0) {
    Navigator.push(context, MaterialPageRoute(builder: (context) => const Add()));
    return;
  }
  // 其余导航项切换当前页面
  setState(() {
    _activePage = index;
  });
}

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