Flutter 告别底部导航水波纹：打造完美视觉盛宴

2023-10-29 05:40:48

Flutter 底部导航的水波纹谜团

Flutter 的 BottomNavigationBar 组件通常会在用户点击时产生一个水波纹效果。虽然这在某些情况下可能有用，但它也可能干扰美观并与某些设计方案不符。

告别水波纹：BottomNoInkBarItem 登场

为了解决这个问题，Flutter 社区创建了 BottomNoInkBarItem Widget。这个 Widget 通过覆盖 BottomNavigationBarItem 的 build 方法，有效地禁用了水波纹效果。

class BottomNoInkBarItem extends BottomNavigationBarItem {
  BottomNoInkBarItem({
    required Widget icon,
    required Widget activeIcon,
    String? title,
    Widget? tooltip,
  }) : super(icon: icon, activeIcon: activeIcon, title: title, tooltip: tooltip);

  @override
  Widget build(BuildContext context, bool selected, bool focused, ThemeData theme) {
    return BottomNavigationBarItem(
      icon: icon,
      activeIcon: activeIcon,
      title: title,
      tooltip: tooltip,
    );
  }
}

注入灵活性：Provider 和 Consumer

为了动态地控制水波纹的显示与隐藏，我们可以使用 Provider 和 Consumer。Provider 允许我们在应用程序中管理和分发对象，而 Consumer 则允许我们从 Provider 中获取这些对象。

通过在 Provider 中保存一个布尔值，我们可以控制水波纹是否启用。然后，Consumer 可以订阅这个值，并在其更改时更新子 Widget。

实战：打造无水波纹底部导航栏

为了创建一个无水波纹底部导航栏，我们可以按照以下步骤进行：

在应用程序的顶层定义一个 Provider：

class AppState extends ChangeNotifier {
  bool showRipple = true;
}

在需要的地方使用 Consumer 来获取 Provider 的值：

Consumer<AppState>(
  builder: (context, state, child) {
    return BottomNavigationBar(
      items: [
        BottomNoInkBarItem(
          icon: Icon(Icons.home),
          activeIcon: Icon(Icons.home_filled),
          title: Text('主页'),
        ),
        BottomNoInkBarItem(
          icon: Icon(Icons.settings),
          activeIcon: Icon(Icons.settings_applications),
          title: Text('设置'),
        ),
      ],
      currentIndex: 0,
      showSelectedLabels: state.showRipple,
      showUnselectedLabels: state.showRipple,
    );
  },
)