Material 组件三剑客：BottomNavigationBar、TabBar、Drawer

Flutter 基础（六）：Material 组件之 BottomNavigationBar、TabBar、Drawer

在移动开发中，导航栏是必不可少的元素，它可以帮助用户在应用程序中轻松自如地穿梭。Flutter 提供了一系列 Material 组件，其中 BottomNavigationBar、TabBar 和 Drawer 是最常用的导航栏组件。这篇文章将带你领略这三剑客的风采，助你打造出优雅、易用的 Flutter 应用程序。

BottomNavigationBar：轻盈的底部导航

BottomNavigationBar 顾名思义，是一个位于屏幕底部的导航栏。它通常用于在几个主要页面之间进行切换，每个页面对应导航栏上的一个按钮。BottomNavigationBar 的特点是占用空间小，操作方便，对于需要在多个页面间频繁切换的应用程序来说，它是一个不错的选择。

要使用 BottomNavigationBar，只需在 Scaffold 的 bottomNavigationBar 属性中指定一个 BottomNavigationBar 组件即可。BottomNavigationBar 的主要属性包括：

• items： 一个列表，包含要显示在导航栏上的按钮项。
• currentIndex： 当前选中的按钮索引。
• onTap： 当用户点击某个按钮时触发的回调函数。

TabBar：选项卡式导航

TabBar 是一种选项卡式的导航栏，通常用于在多个相关页面之间进行切换。与 BottomNavigationBar 相比，TabBar 位于屏幕顶部，并且可以水平或垂直排列。TabBar 的特点是简洁、高效，对于需要组织大量相关内容的应用程序来说，它是一个不错的选择。

要使用 TabBar，需要创建一个 TabBarView，它是一个包含多个页面的容器。然后，在 Scaffold 的 appBar 属性中指定一个 TabBar 组件，并将 TabBarView 作为 TabBar 的 tabs 属性。TabBar 的主要属性包括：

• tabs： 一个列表，包含要显示在选项卡栏上的选项卡项。
• controller： 一个 TabController 控制器，用于管理选项卡的切换。
• indicator： 一个显示当前选中选项卡的指示器。

Drawer：侧边抽屉

Drawer 是一个侧边抽屉，通常用于提供应用程序的二级导航或设置选项。Drawer 的特点是占用空间小，可以隐藏在屏幕外侧，在需要时通过滑动或点击触发器打开。Drawer 对于需要在不影响主屏幕内容的情况下提供额外信息的应用程序来说，它是一个不错的选择。

要使用 Drawer，需要创建一个 Drawer 组件并将其作为 Scaffold 的 drawer 属性。Drawer 的主要属性包括：

• child： Drawer 中要显示的内容。
• width： Drawer 的宽度。
• elevation： Drawer 的阴影高度。

结语

BottomNavigationBar、TabBar 和 Drawer 是 Flutter 中常用的 Material 组件，它们可以帮助你打造出优雅、易用的导航体验。通过灵活运用这些组件，你可以轻松满足各种导航需求，为用户提供顺畅、无缝的使用体验。

附录