如何在Flutter中用Enum定义selectedIndex，实现NavigationBar目的地单处维护

核心思路 #

通过Enum绑定每个导航目的地的图标、标签、对应页面，利用Enum的values属性自动生成NavigationBar的destinations列表，同时直接通过selectedIndex映射到Enum实例获取对应页面。仅需修改Enum中项的顺序，就能同步更新导航栏顺序和页面映射，彻底避免两处维护的出错风险。

具体实现步骤 #

1. 定义导航项Enum #

创建包含所有导航信息的Enum，每个枚举值对应一个完整的导航目的地：

enum NavDestination {
  home(
    icon: Icons.home,
    label: '首页',
    page: HomePage(),
  ),
  explore(
    icon: Icons.explore,
    label: '发现',
    page: ExplorePage(),
  ),
  profile(
    icon: Icons.person,
    label: '我的',
    page: ProfilePage(),
  );

  const NavDestination({
    required this.icon,
    required this.label,
    required this.page,
  });

  final IconData icon;
  final String label;
  final Widget page;
}

2. 在页面中使用Enum生成导航栏与页面 #

在StatefulWidget中直接基于Enum生成导航栏，并通过索引映射页面：

class MainScreen extends StatefulWidget {
  const MainScreen({super.key});

  @override
  State<MainScreen> createState() => _MainScreenState();
}

class _MainScreenState extends State<MainScreen> {
  int _selectedIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 直接通过Enum索引获取当前页面
      body: NavDestination.values[_selectedIndex].page,
      bottomNavigationBar: NavigationBar(
        selectedIndex: _selectedIndex,
        onDestinationSelected: (index) => setState(() => _selectedIndex = index),
        // 自动生成destinations列表
        destinations: NavDestination.values.map((dest) {
          return NavigationDestination(
            icon: Icon(dest.icon),
            label: dest.label,
          );
        }).toList(),
      ),
    );
  }
}

方案优势 #

• 单源维护：所有导航配置（顺序、图标、标签、页面）集中在Enum中，调整顺序仅需修改Enum项的排列，无需同步修改两处代码。
• 无switch冗余：不需要用switch匹配索引与页面，直接通过Enum索引映射，减少逻辑冗余和出错概率。
• 类型安全：Enum的类型检查能避免无效索引或错误页面绑定，比直接使用列表下标更可靠。

扩展优化（支持动态页面） #

如果页面需要初始化参数，可将Enum中的page改为页面构建函数：

enum NavDestination {
  home(
    icon: Icons.home,
    label: '首页',
    pageBuilder: () => HomePage(),
  ),
  explore(
    icon: Icons.explore,
    label: '发现',
    pageBuilder: () => ExplorePage(),
  );

  const NavDestination({
    required this.icon,
    required this.label,
    required this.pageBuilder,
  });

  final IconData icon;
  final String label;
  final Widget Function() pageBuilder;
}

使用时调用构建函数：

body: NavDestination.values[_selectedIndex].pageBuilder(),

内容的提问来源于stack exchange，提问作者Chris Nadovich