Flutter入门: NavigationBar 详解

当前版本 Flutter 3.19.5

前言

NavigationBar 通常位于顶部或底部，用于导航和页面切换。它可以包含标题、操作按钮和导航指示器，提供了用户在应用程序中浏览和导航的方式。

属性

属性一览

animationDuration: 标签背景动画时长
backgroundColor: 导航栏自身的颜色
destinations: 导航标签列表
elevation: 导航栏的层级
height: 导航栏的高度
indicatorColor: 选中的标签颜色
indicatorShape: 选中的标签形状
labelBehavior: 标签显示模式
onDestinationSelected: 标签选中时的回调
overlayColor: 标签按下时的颜色
selectedIndex: 当前选中的标签索引
shadowColor: 标签栏阴影的颜色
surfaceTintColor: 标签栏背景表面叠加的颜色

animationDuration: 标签背景动画时长

实现

final Duration? animationDuration;

示例

Flutter入门: NavigationBar 详解 - 第1张图片

int selectedIndex = 0;

bottomNavigationBar: NavigationBar(
  animationDuration: const Duration(seconds: 20),
  selectedIndex: selectedIndex,
  onDestinationSelected: (int index) {
    setState(() {
      selectedIndex = index;
    });
  },
  destinations: const [
    NavigationDestination(
      icon: Icon(Icons.home_outlined),
      label: 'Home',
    ),
    NavigationDestination(
      icon: Icon(Icons.notifications_sharp),
      label: 'Notifications',
    ),
    NavigationDestination(
      icon: Icon(Icons.messenger_sharp),
      label: 'Messages',
    ),
  ],
),

backgroundColor: 导航栏自身的颜色

实现

final Color? backgroundColor;

示例

Flutter入门: NavigationBar 详解 - 第2张图片

bottomNavigationBar: NavigationBar(
  backgroundColor: Colors.green,
  destinations: const [
    NavigationDestination(
      icon: Icon(Icons.home_outlined),
      label: 'Home',
    ),
    NavigationDestination(
      icon: Icon(Icons.notifications_sharp),
      label: 'Notifications',
    ),
    NavigationDestination(
      icon: Icon(Icons.messenger_sharp),
      label: 'Messages',
    ),
  ],
),

destinations: 导航标签列表

实现

final List<Widget> destinations;

示例

bottomNavigationBar: NavigationBar(
  destinations: const [
    NavigationDestination(
      icon: Icon(Icons.home_outlined),
      label: 'Home',
    ),
    NavigationDestination(
      icon: Icon(Icons.notifications_sharp),
      label: 'Notifications',
    ),
    NavigationDestination(
      icon: Icon(Icons.messenger_sharp),
      label: 'Messages',
    ),
  ],
),

elevation: 导航栏的层级

如果 ThemeData.useMaterial3 = true ，默认值为 3.0 ，否则为 0.0.

实现

final double? elevation;

示例

bottomNavigationBar: NavigationBar(
  elevation: 1,
  destinations: const [
    NavigationDestination(
      icon: Icon(Icons.home_outlined),
      label: 'Home',
    ),
    NavigationDestination(
      icon: Icon(Icons.notifications_sharp),
      label: 'Notifications',
    ),
    NavigationDestination(
      icon: Icon(Icons.messenger_sharp),
      label: 'Messages',
    ),
  ],
),

height: 导航栏的高度

默认值 80

实现

final double? height;

示例

Flutter入门: NavigationBar 详解 - 第3张图片

bottomNavigationBar: NavigationBar(
  height: 160,
  destinations: const [
    NavigationDestination(
      icon: Icon(Icons.home_outlined),
      label: 'Home',
    ),
    NavigationDestination(
      icon: Icon(Icons.notifications_sharp),
      label: 'Notifications',
    ),
    NavigationDestination(
      icon: Icon(Icons.messenger_sharp),
      label: 'Messages',
    ),
  ],
),

indicatorColor: 选中的标签颜色

实现

final Color? indicatorColor;

示例

Flutter入门: NavigationBar 详解 - 第4张图片

bottomNavigationBar: NavigationBar(
  indicatorColor: Colors.red,
  destinations: const [
    NavigationDestination(
      icon: Icon(Icons.home_outlined),
      label: 'Home',
    ),
    NavigationDestination(
      icon: Icon(Icons.notifications_sharp),
      label: 'Notifications',
    ),
    NavigationDestination(
      icon: Icon(Icons.messenger_sharp),
      label: 'Messages',
    ),
  ],
),

indicatorShape: 选中的标签形状

实现

final ShapeBorder? indicatorShape;

示例

Flutter入门: NavigationBar 详解 - 第5张图片

bottomNavigationBar: NavigationBar(
  indicatorShape: const CircleBorder(),
  destinations: const [
    NavigationDestination(
      icon: Icon(Icons.home_outlined),
      label: 'Home',
    ),
    NavigationDestination(
      icon: Icon(Icons.notifications_sharp),
      label: 'Notifications',
    ),
    NavigationDestination(
      icon: Icon(Icons.messenger_sharp),
      label: 'Messages',
    ),
  ],
),

labelBehavior: 标签显示模式

alwaysShow: 显示所有标签（默认值）

onlyShowSelected: 仅显示所选标签

alwaysHide: 隐藏所有标签

实现

final NavigationDestinationLabelBehavior? labelBehavior;

示例

Flutter入门: NavigationBar 详解 - 第6张图片

bottomNavigationBar: NavigationBar(
  labelBehavior: NavigationDestinationLabelBehavior.onlyShowSelected,
  destinations: const [
    NavigationDestination(
      icon: Icon(Icons.home_outlined),
      label: 'Home',
    ),
    NavigationDestination(
      icon: Icon(Icons.notifications_sharp),
      label: 'Notifications',
    ),
    NavigationDestination(
      icon: Icon(Icons.messenger_sharp),
      label: 'Messages',
    ),
  ],
),

onDestinationSelected: 标签选中时的回调

实现

final ValueChanged<int>? onDestinationSelected;

示例

bottomNavigationBar: NavigationBar(
  onDestinationSelected: (int index) {
    print(index);
  },
  destinations: const [
    NavigationDestination(
      icon: Icon(Icons.home_outlined),
      label: 'Home',
    ),
    NavigationDestination(
      icon: Icon(Icons.notifications_sharp),
      label: 'Notifications',
    ),
    NavigationDestination(
      icon: Icon(Icons.messenger_sharp),
      label: 'Messages',
    ),
  ],
),

overlayColor: 标签按下时的颜色

实现

final MaterialStateProperty<Color?>? overlayColor;

示例

bottomNavigationBar: NavigationBar(
  overlayColor: MaterialStateProperty.all(Colors.red),
  destinations: const [
    NavigationDestination(
      icon: Icon(Icons.home_outlined),
      label: 'Home',
    ),
    NavigationDestination(
      icon: Icon(Icons.notifications_sharp),
      label: 'Notifications',
    ),
    NavigationDestination(
      icon: Icon(Icons.messenger_sharp),
      label: 'Messages',
    ),
  ],
),

selectedIndex: 当前选中的标签索引

实现

final Duration? selectedIndex;

示例

int selectedIndex = 0;

bottomNavigationBar: NavigationBar(
  selectedIndex: selectedIndex,
  onDestinationSelected: (int index) {
    setState(() {
      selectedIndex = index;
    });
  },
  destinations: const [
    NavigationDestination(
      icon: Icon(Icons.home_outlined),
      label: 'Home',
    ),
    NavigationDestination(
      icon: Icon(Icons.notifications_sharp),
      label: 'Notifications',
    ),
    NavigationDestination(
      icon: Icon(Icons.messenger_sharp),
      label: 'Messages',
    ),
  ],
),

shadowColor: 标签栏阴影的颜色

实现

final Color? shadowColor;

示例

Flutter入门: NavigationBar 详解 - 第7张图片

body: NavigationBar(
  shadowColor: Colors.red,
  destinations: const [
    NavigationDestination(
      icon: Icon(Icons.home_outlined),
      label: 'Home',
    ),
    NavigationDestination(
      icon: Icon(Icons.notifications_sharp),
      label: 'Notifications',
    ),
    NavigationDestination(
      icon: Icon(Icons.messenger_sharp),
      label: 'Messages',
    ),
  ],
),

surfaceTintColor: 标签栏背景表面叠加的颜色

实现

final Color? surfaceTintColor;

示例

Flutter入门: NavigationBar 详解 - 第8张图片

body: NavigationBar(
  surfaceTintColor: Colors.red,
  destinations: const [
    NavigationDestination(
      icon: Icon(Icons.home_outlined),
      label: 'Home',
    ),
    NavigationDestination(
      icon: Icon(Icons.notifications_sharp),
      label: 'Notifications',
    ),
    NavigationDestination(
      icon: Icon(Icons.messenger_sharp),
      label: 'Messages',
    ),
  ],
),

...完...

本文首发于：Flutter入门: NavigationBar 详解-𝕏𝕏 与 🐈

前言

属性