如何添加一个BottomNavigationBarItem 只颤动

在开发一个应用时，BottomNavigationBar 是一个非常常用的 UI 组件。BottomNavigationBar 可以帮助用户快速切换到应用中不同的页面。同时，BottomNavigationBar 可以自定义样式，让应用具有个性化的风格。通常 BottomNavigationBar 都会实现点击切换页面的功能，但是有时也需要 BottomNavigationBar 只颤动而不切换页面。下面我们就来详细介绍一下如何添加一个 BottomNavigationBarItem 只颤动的功能。

添加一个 BottomNavigationBarItem

首先我们需要添加一个 BottomNavigationBarItem 到 BottomNavigationBar 中。代码如下：

bottomNavigationBar: BottomNavigationBar(
  items: [
    BottomNavigationBarItem(
      icon: Icon(Icons.home),
      label: 'Home'
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.person),
      label: 'Profile'
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.message),
      label: 'Messages'
    ),
  ],
  onTap: (int index) {
    // 点击 BottomNavigationBarItem 后的处理逻辑
  },
),

在上面的代码中，我们使用了 BottomNavigationBarItem 和 BottomNavigationBar 两个组件。在 BottomNavigationBarItem 中，我们指定了一个 icon 和一个 label。icon 属性用于设置 BottomNavigationBarItem 的图标，label 属性用于设置 BottomNavigationBarItem 的文本。在 BottomNavigationBar 中，我们使用 items 属性将 BottomNavigationBarItem 添加到 BottomNavigationBar 中。同时，我们指定了一个 onTap 方法，用于处理 BottomNavigationBarItem 的点击事件。

颤动 BottomNavigationBarItem

当用户点击 BottomNavigationBarItem 时，我们可以通过 onTap 方法来控制 BottomNavigationBarItem 的颤动效果。我们可以修改 BottomNavigationBarItem 的状态，在状态改变后，BottomNavigationBarItem 会自动颤动起来。代码如下：

bottomNavigationBar: BottomNavigationBar(
  items: [
    BottomNavigationBarItem(
      icon: Icon(Icons.home),
      label: 'Home'
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.person),
      label: 'Profile'
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.message),
      label: 'Messages'
    ),
  ],
  onTap: (int index) {
    // 点击 BottomNavigationBarItem 后的处理逻辑
    setState(() {
      // 修改 BottomNavigationBarItem 的状态
    });
  },
),

在上面的代码中，我们在 onTap 方法中调用了 setState 方法。在 setState 方法中，我们可以修改 BottomNavigationBarItem 的状态。修改 BottomNavigationBarItem 的状态会使 BottomNavigationBarItem 重新绘制，从而实现颤动的效果。

增加只颤动的逻辑

在上面的代码中，我们已经可以实现颤动效果了。但是，我们需要增加一个只颤动的逻辑，即当用户点击某个 BottomNavigationBarItem 时，只对当前点击的 BottomNavigationBarItem 进行颤动，而不对其他 BottomNavigationBarItem 进行颤动。代码如下：

int _selectedIndex = -1;

bottomNavigationBar: BottomNavigationBar(
  items: [
    BottomNavigationBarItem(
      icon: Icon(Icons.home),
      label: 'Home'
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.person),
      label: 'Profile'
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.message),
      label: 'Messages'
    ),
  ],
  onTap: (int index) {
    // 点击 BottomNavigationBarItem 后的处理逻辑
    setState(() {
      if (_selectedIndex == index) {
        _selectedIndex = -1; // 重置状态，取消颤动效果
      } else {
        _selectedIndex = index; // 当前点击的 BottomNavigationBarItem 进行颤动
      }
    });
  },
  selectedItemColor: Colors.black, // BottomNavigationBarItem 选中时的颜色
  unselectedItemColor: Colors.grey, // BottomNavigationBarItem 未选中时的颜色
  currentIndex: _selectedIndex, // 当前选中的 BottomNavigationBarItem
),

在上面的代码中，我们增加了一个 _selectedIndex 变量，用于保存当前选中的 BottomNavigationBarItem 的索引。在 onTap 方法中，如果当前点击的 BottomNavigationBarItem 的索引和 _selectedIndex 相同，表示用户想要取消颤动效果，此时我们将 _selectedIndex 重置为 -1。如果当前点击的 BottomNavigationBarItem 的索引和 _selectedIndex 不同，表示用户点击了一个未选中的 BottomNavigationBarItem，并想要对其进行颤动效果，此时我们将 _selectedIndex 设置为当前点击的 BottomNavigationBarItem 的索引。在 BottomNavigationBar 中，我们使用 selectedItemColor 属性指定 BottomNavigationBarItem 选中时的颜色，使用 unselectedItemColor 属性指定 BottomNavigationBarItem 未选中时的颜色，使用 currentIndex 属性指定当前选中的 BottomNavigationBarItem。

这样，我们就完成了 BottomNavigationBarItem 只颤动的功能。