Flutter onTab 点击事件无响应

Question

我正在处理颤振页脚导航，我有一个文件，我可以在其中启动所有需要的参数，如下所示：

  const Db5BottomNavigationBarItem({
    required this.icon,
    this.title,
    Widget? activeIcon,
    this.backgroundColor,
    required this.onTap,
  }) : activeIcon = activeIcon as String? ?? icon;

  
  final String icon;
  final String activeIcon;
  final Widget? title;
  final Color? backgroundColor;
  final Function onTap;
}

这就是我在页脚组件中使用它的方式：

 child: Db5BottomNavigationBar(
          items: <Db5BottomNavigationBarItem>[
            Db5BottomNavigationBarItem(
              icon: db5_ic_home,
              onTap: () {},
            ),
            Db5BottomNavigationBarItem(
              icon: db5_ic_heart,
              onTap: () {
                Navigator.push(context,
                    MaterialPageRoute(builder: (context) => new Health()));
              },
            ),
            Db5BottomNavigationBarItem(
              icon: db5_ic_msg,
              onTap: () {},
            ),
            Db5BottomNavigationBarItem(
              icon: db5_ic_setting,
              onTap: () {},
            ),
          ],
          // currentIndex: _selectedIndex,
          unselectedIconTheme: IconThemeData(color: db5_icon_color, size: 24),
          selectedIconTheme: IconThemeData(color: db5_colorPrimary, size: 24),
          onTap: (int index) {
            setState(() {
              // _selectedIndex = index;
            });
          },
          type: Db5BottomNavigationBarType.fixed,
        ),

问题是，一旦按钮被点击，就说第一个：

                Navigator.push(context,
                    MaterialPageRoute(builder: (context) => new Health()));
              },

完全没有错误，也没有响应。 我做错了什么？

Answer 1

BottomNavigationBarItem 没有onTap 方法，这就是为什么在那里添加代码时没有任何反应的原因。 BottomNavigationBar 本身有 onTap，就像你的代码：onTap: (int index)。每次用户点击任何项目时都会调用它，index 将根据位置为 0、1、2 等。

考虑到 cmets，我建议使用 BottomAppBar 作为 bottomNavigationBar，因为用例是导航到不同的路线。比如：

bottomNavigationBar: BottomAppBar(
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    crossAxisAlignment: CrossAxisAlignment.center,
    children: [
      TextButton(
        child: Column(mainAxisSize: MainAxisSize.min, children: [
          Icon(Icons.home),
          Text('Home'),
        ]),
        onPressed: () {
          Navigator.push(context,
            MaterialPageRoute(builder: (context) => Route1()));
        },
      ),
      TextButton(
        child: Column(mainAxisSize: MainAxisSize.min, children: [
          Icon(Icons.message),
          Text('Message'),
        ]),
        onPressed: () {
          Navigator.push(context,
            MaterialPageRoute(builder: (context) => Route2()));
        },
      ),
      TextButton(
        child: Column(mainAxisSize: MainAxisSize.min, children: [
          Icon(Icons.person),
          Text('User'),
        ]),
        onPressed: () {
          Navigator.push(context,
            MaterialPageRoute(builder: (context) => Route3()));
        },
      )
    ],
  ),
))

To be complete, here is the same with BottomNavigationBar, but here is no new route, but existing widgets in _pages, and the body is replaced with one of them when something is selected.这样导航栏就会持续显示当前的选择。但这也意味着_pages中的所有小部件都被创建并消耗内存。

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _currentIndex = 0;

  static const List<Widget> _pages = <Widget>[
    Text('home'),
    Text('message'),
    Text('person'),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("My App"),
      ),
      body: Center(
        child: _pages.elementAt(_currentIndex),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.message),
            label: 'Message',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            label: 'Person',
          ),
        ],
        currentIndex: _currentIndex,
        selectedItemColor: Colors.amber[800],
        onTap: (int index) {
          setState(() {
            _currentIndex = index;
          });
        },
      ),
    );
  }
}

Answer 2

BottomNavigationBarItem 没有 onTap 属性。但是您可以给它一个具有 onPressed 参数的 IconButton，而不仅仅是分配一个图标。

BottomNavigationBarItem(
            label: 'Post',
            icon: IconButton(
                icon: Icon(Icons.add),
                onPressed: () => Navigator.push(context,
                    MaterialPageRoute(builder: (context) => CreatePage()))),
          )

.

bottomNavigationBar: BottomNavigationBar(
  ....
   onTap: (int index) {
   //Make sure you exclude the index of the Particular BottomNavigationBarItem you want to use the onTap on
          if (index != 2) {
            setState(() {
              _currentIndex = index;
            });
          }

如果您只想将一个 BottomNavigationBarItem 路由到某处，则应使用此选项。如果您计划在所有 BottomNavigationBarItems 上使用它，就像我在您的代码中看到的那样，它会给您带来路由问题。您应该将BottomNavigationBar OnTap 属性与currentindex 一起使用。