Flutter底部导航栏插件bottom_navigation_view的使用

Flutter底部导航栏插件bottom_navigation_view的使用

动机

Flutter 提供了一个很好的小部件来制作底部导航界面，但它们不支持导航和过渡。处理 Android 的返回按钮并为底部导航小部件添加过渡效果并不容易。就像 TabBarView 和 TabBarController 一样，我们需要一组小部件和类来帮助实现底部导航，同时保持 UI 中立。这个包提供了一组小部件和一个控制器，使处理返回按钮和过渡变得更加简单。

示例

淡入淡出

淡入淡出通过

开始使用

如果你曾经使用过 TabBarView 小部件，那么使用 BottomNavigationView 小部件会更容易。BottomNavigationView 小部件的工作方式几乎相同，并且遵循相同的语义。

首先，我们将声明 BottomNavigationController。它需要 SingleTickerProviderMixin 作为必需参数，就像 TabBarController 一样。别忘了在 dispose() 方法中释放它。

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

  [@override](/user/override)
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> with SingleTickerProviderStateMixin {
  late final BottomNavigationController _controller;

  [@override](/user/override)
  void initState() {
    super.initState();
    _controller = BottomNavigationController(vsync: this);
  }

  [@override](/user/override)
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Container();
  }
}

接下来，我们将使用 BottomNavigationView 和 BottomNavigationIndexedBuilder 小部件。两者都需要将 BottomNavigationController 作为 controller 属性。必须给定 BottomNavigationController 的同一实例才能使其正常工作。

BottomNavigationView 接收屏幕小部件作为 children 属性。这些小部件将成为每个底部导航的屏幕。你可以给它一个 Navigator 小部件以进行嵌套导航。

BottomNavigationView(
  controller: _controller,
  transitionType: BottomNavigationTransitionType.none,
  children: const [
    ColorScreen(color: Colors.red, name: 'Red'),
    ColorScreen(color: Colors.amber, name: 'Amber'),
    ColorScreen(color: Colors.yellow, name: 'Yellow'),
    ColorScreen(color: Colors.green, name: 'Green'),
    ColorScreen(color: Colors.blue, name: 'Blue'),
  ],
)

BottomNavigationIndexedBuilder 具有 builder 属性。当控制器检测到导航索引更改时，将调用 builder 函数，并提供更改的索引作为第二个参数。在这里，你可以返回任何自定义的底部导航小部件。它是完全 UI 中立的，并且可以很好地与任何底部导航小部件包一起工作。

BottomNavigationIndexedBuilder(
  controller: _controller,
  builder: (context, index, child) {
    return BottomNavigationBar(
      currentIndex: index,
      onTap: (index) {
        _controller.goTo(index);
      },
      type: BottomNavigationBarType.fixed,
      items: const [
        BottomNavigationBarItem(label: 'Red', icon: Icon(Icons.home)),
        BottomNavigationBarItem(label: 'Amber', icon: Icon(Icons.home)),
        BottomNavigationBarItem(label: 'Yellow', icon: Icon(Icons.home)),
        BottomNavigationBarItem(label: 'Green', icon: Icon(Icons.home)),
        BottomNavigationBarItem(label: 'Blue', icon: Icon(Icons.home)),
      ],
    );
  },
),

一旦构建了你的 UI，你就可以调用 BottomNavigationController 上的 goTo() 和 goBack() 函数。在 BottomNavigationBar 上调用 goTo() 函数，在 WillPopScope 小部件上调用 goBack() 函数以处理 Android 的返回按钮。 如果你想更改过渡动画，使用 transitionType 参数指定 BottomNavigationTransitionType 枚举值之一。它有 fadeInOut 和 fadeThrough 值。你可以查看示例中的演示效果。

该包还提供了类似于 DefaultTabBarController 的 DefaultBottomNavigationController。

class Home extends StatelessWidget {
  const Home({ Key? key }) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return DefaultBottomNavigationController(child: ...)
  }
}

以下是完整的代码：

class _HomeScreenState extends State<HomeScreen> with SingleTickerProviderStateMixin {
  late final BottomNavigationController _controller;

  [@override](/user/override)
  void initState() {
    super.initState();
    _controller = BottomNavigationController(vsync: this);
  }

  [@override](/user/override)
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () async {
        _controller.goBack();
        return false;
      },
      child: Scaffold(
        body: BottomNavigationView(
          controller: _controller,
          transitionType: BottomNavigationTransitionType.none,
          children: const [
            ColorScreen(color: Colors.red, name: 'Red'),
            ColorScreen(color: Colors.amber, name: 'Amber'),
            ColorScreen(color: Colors.yellow, name: 'Yellow'),
            ColorScreen(color: Colors.green, name: 'Green'),
            ColorScreen(color: Colors.blue, name: 'Blue'),
          ],
        ),
        bottomNavigationBar: BottomNavigationIndexedBuilder(
          controller: _controller,
          builder: (context, index, child) {
            return BottomNavigationBar(
              currentIndex: index,
              onTap: (index) {
                _controller.goTo(index);
              },
              type: BottomNavigationBarType.fixed,
              items: const [
                BottomNavigationBarItem(label: 'Red', icon: Icon(Icons.home)),
                BottomNavigationBarItem(label: 'Amber', icon: Icon(Icons.home)),
                BottomNavigationBarItem(label: 'Yellow', icon: Icon(Icons.home)),
                BottomNavigationBarItem(label: 'Green', icon: Icon(Icons.home)),
                BottomNavigationBarItem(label: 'Blue', icon: Icon(Icons.home)),
              ],
            );
          },
        ),
      ),
    );
  }
}