Flutter NavigationBar 使用详解：Material 3 底部导航实现

周予安

发布时间：2026-10-15| 6人浏览过

原创

在 Flutter 开发中，当应用包含多个主要内容区域时，底部导航是常见的交互模式。本文重点讲解基于 Material 3 设计规范的 NavigationBar 组件，涵盖其核心属性配置、状态管理及视觉定制方法，助您快速实现现代化的底部导航栏。

为什么选择 NavigationBar

传统的 BottomNavigationBar 基于 Material 2 设计规范，而新的 NavigationBar 引入了 Material 3 的外观与交互逻辑。其显著特征包括支持药丸形状的指示器（Pill Shape），以对比色直观标识当前选中的目的地。这种设计更符合现代移动端用户的操作习惯。

NavigationBar 的核心职责是提供一组固定的顶级导航选项，通常用于在 3 到 5 个主要屏幕之间切换。相比旧版组件，它在动画流畅度和视觉层次上有所提升。

基础实现步骤

第1步：定义导航目标列表

目的：确定底部栏显示的图标与文字标签。
动作：创建包含多个 NavigationDestination 对象的列表。每个对象需指定 icon 和 label。

NavigationBar(
    destinations: [
        NavigationDestination(
            icon: Icon(Icons.home),
            label: 'Home',
        ),
        NavigationDestination(
            icon: Icon(Icons.explore),
            label: 'Explore',
        ),
        NavigationDestination(
            icon: Icon(Icons.person),
            label: 'Profile',
        ),
        NavigationDestination(
            icon: Icon(Icons.settings_rounded),
            label: 'Settings',
        ),
    ],
    // ... 其他参数
)

第2步：绑定选中索引与回调

目的：控制当前高亮项并响应点击事件。
入口：Scaffold 的 Stateful 组件。
参数：selectedIndex (int) 和 onDestinationSelected (Callback)。
完成状态：点击图标后，界面能正确切换视图且选中样式更新。

在 StatefulWidget 中维护一个整型变量作为当前页码索引，并在回调中通过 setState 更新它。

NavigationBar(
    destinations: [...],
    selectedIndex: currentPageIndex,
    onDestinationSelected: (int index) {
        setState(() {
            currentPageIndex = index;
        });
    }
)

第3步：集成至 Scaffold 并切换内容

目的：将导航栏置于屏幕底部，并根据索引显示对应的 Body 内容。
动作：将 NavigationBar 赋值给 Scaffold 的 bottomNavigationBar 属性。在 body 中根据 currentPageIndex 从 Widget 列表中选取对应组件。

Scaffold(
    bottomNavigationBar: NavigationBar( /* 此处填入上述定义 */ ),
    body: [Widget1, Widget2, Widget3, Widget4][currentPageIndex]
)

常用配置与自定义

为了适配不同的设计需求，可以通过以下参数调整 NavigationBar 的行为与外观。

1. 标签显示行为 (labelBehavior)

默认情况下，所有目标的标签始终显示。若希望仅在选中时显示标签，可设置 labelBehavior 为 NavigationDestinationLabelBehavior.onlyShowSelected。

NavigationBar(
    destinations: [...],
    selectedIndex: currentPageIndex,
    onDestinationSelected: (int index) { ... },
    labelBehavior: NavigationDestinationLabelBehavior.onlyShowSelected,
)

2. 背景颜色 (backgroundColor)

通过 backgroundColor 属性可以修改导航栏的背景色，使其与整体 UI 风格保持一致。

NavigationBar(
    destinations: [...],
    selectedIndex: currentPageIndex,
    onDestinationSelected: (int index) { ... },
    backgroundColor: Colors.grey,
)

3. 动画持续时间 (animationDuration)

控制选中状态变化时的动画时长，单位通常为毫秒。默认值较为简短，可根据品牌节奏调整。

NavigationBar(
    destinations: [...],
    selectedIndex: currentPageIndex,
    onDestinationSelected: (int index) { ... },
    animationDuration: Duration(milliseconds: 1000),
)