Flutter 底部导航栏

底部导航栏在过去几年中已成为在不同 UI 之间进行导航的热门选择。许多开发人员使用底部导航栏，因为现在大多数应用程序都使用此小部件在不同屏幕之间进行导航。

Flutter 中的底部导航栏可以包含多个项目，例如文本标签、图标或两者兼有。它允许用户快速在应用程序的顶级视图之间导航。如果使用更大的屏幕，最好使用侧边导航栏。

在 Flutter 应用程序中，我们通常将底部导航栏与 scaffold 小部件结合使用。Scaffold 小部件提供了一个 Scaffold.bottomNavigationBar 参数来设置底部导航栏。需要注意的是，仅添加 BottomNavigationBar 不会显示导航项目。 需要为 Items 属性设置 BottomNavigationItems，该属性接受 BottomNavigationItems 小部件的列表。

将项目添加到底部导航栏时，请记住以下要点

• 我们只能在底部导航栏中显示少量小部件，可以为 2 到 5 个。
• 它必须至少有两个底部导航项目。否则，我们将收到一个错误。
• 它需要具有图标和标题属性，我们需要为它们设置相关的小部件。

BottomNavigationBar 小部件的属性

以下是与底部导航栏小部件一起使用的属性

items: 它定义要在底部导航栏中显示的列表。它使用参数 BottomNavigationBarItem，该参数包含以下子属性

currentIndex: 它确定屏幕上当前活动的底部导航栏项目。

onTap: 当我们点击屏幕上的一个项目时调用它。

iconSize: 用于指定所有底部导航项目图标的大小。

fixedColor: 用于设置所选项目的颜色。 如果我们尚未为图标或标题设置颜色，则将显示它。

type: 它确定底部导航栏的布局和行为。它的行为方式有两种：fixed 和 shifting。如果为 null，它将使用固定。否则，它将使用 shifting，当我们单击一个按钮时，我们可以看到一个动画。

示例

让我们通过一个例子来了解如何在 Flutter 应用程序中创建底部导航栏。因此，打开 Android Studio 并创建 Flutter 应用程序。接下来。 打开 main.dart 文件并使用以下代码删除其代码

在上面的代码中，我们在 scaffold 小部件中使用了 BottomNavigationBar。此导航栏包含 三个 BottomNavigationBarItem 小部件。在这里，我们将 currentIndex 设置为 0，以选择 绿色 的项目。onTap() 函数用于更改所选项目的索引，然后显示相应的消息。

输出

当我们运行该应用程序时，我们应该获得类似于以下屏幕截图的 UI

当我们单击底部导航栏中的 搜索图标 时，它将显示以下屏幕。