Flutter 底部导航栏选定索引页问题

Question

我的底部导航栏有问题。 当我单击底部导航栏中的图标按钮时，页面将更改为编码页面，但颜色保持与单击的索引相同（白色）。

当我单击底部导航栏项目周围的区域时，颜色开始更改（橙色），但不会调用用于更改站点的 onPressed 方法。

有谁知道为什么吗？

我的代码：

 class MyBottomNavigationBar extends StatefulWidget {
    const MyBottomNavigationBar({super.key});

    @override
    State<MyBottomNavigationBar> createState() => _MyBottomNavigationBarState();
}

    class _MyBottomNavigationBarState extends State<MyBottomNavigationBar> {
    int _selectedIndex = 0;
    void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
   }

    @override
    Widget build(BuildContext context) {
    return Container(
      decoration: const BoxDecoration(
        border: Border(
          top: BorderSide(
            color: Color(0xffAEADB2),
            width: 0.3,
          ),
        ),
      ),
      child: BottomNavigationBar(
        //backgroundColor: Colors.green,
        selectedItemColor: Colors.orange,
        selectedIconTheme: IconThemeData(color: Colors.orange),

        currentIndex: _selectedIndex,
        type: BottomNavigationBarType.fixed,
        //fixedColor: Colors.white,
        unselectedItemColor: Colors.white,
        selectedFontSize: 14,
        unselectedFontSize: 14,
        enableFeedback: false,
        onTap: _onItemTapped,
        // onTap: _onItemTapped,
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: IconButton(
              icon: Icon(Icons.home, size: 24),
              onPressed: () => Navigator.pushReplacement(
                  context,
                  MaterialPageRoute(
                    builder: (context) => Page 1(),
                  )),
            ),
            label: 'Page 1',
          ),
          BottomNavigationBarItem(
            icon: IconButton(
              icon: Icon(Icons.devices, size: 24),
              onPressed: () => Navigator.pushReplacement(
                  context,
                  MaterialPageRoute(
                    builder: (context) => Page 2(),
                  )),
            ),
            label: 'Page 2',
          ),
          BottomNavigationBarItem(
            icon: IconButton(
              icon: Icon(Icons.notifications, size: 24),
              onPressed: () {
                setState(() {
                  //_selectedIndex = 2;
                  Navigator.pushAndRemoveUntil(
                    context,
                    MaterialPageRoute(builder: (context) => Page 3()),
                    (route) => false,
                  );
                });
              },
            ),
            label: 'Page 3',
          ),
          BottomNavigationBarItem(
            icon: IconButton(
              icon: Icon(Icons.settings, size: 24),
              onPressed: () => Navigator.pushReplacement(
                  context,
                  MaterialPageRoute(
                    builder: (context) => Page 4(),
                  )),
            ),
            label: 'Page 4',
          ),
        ],
        //currentIndex: 1,
        //onTap: _onItemTapped,
      ),
    );
  }
 }

我的下一次尝试是： 我尝试用方法 _onItemTapped 替换 IconButtons 内的 Navigator.actions ，并通过这样的 if 语句转移 _onItemTapped 方法内的 Navigator 操作：

class _MyBottomNavigationBarState extends State<MyBottomNavigationBar> {
int _selectedIndex = 0;
void _onItemTapped(int index) {
setState(() {
  _selectedIndex = index;
  if (_selectedIndex == 2) {
    Navigator.pushAndRemoveUntil(
      context,
      MaterialPageRoute(builder: (context) => XxxView()),
      (route) => false,
    );
    setState(() {
      _selectedIndex = 2;
      print(_selectedIndex);
    });
  }
      });
  }

但这似乎也不起作用:(

Answer 1

您可以使用

onTap

中的

BottomNavigationBar

代替嵌套的 tapEvent，并在必要时根据索引进行导航。

onTap: _onItemTapped,
items: <BottomNavigationBarItem>[
  BottomNavigationBarItem(
    icon: Icon(Icons.home, size: 24),
    label: 'Page 1',
  ),

  void _onItemTapped(int index) {
    _selectedIndex = index; // if you like to change just after tap, no matter what route is
    setState(() {});

    /// now navigate based on index;  if or switch statement
    if (index == 0) {
      ///navigate to the newRoute
    } else if (index == 2) {}
  }