Flutter自适应用户组的底部导航栏优化方案咨询

核心思路：抽离导航项配置+动态过滤 #

把导航栏的每个项抽象成数据模型，通过用户权限动态过滤出符合条件的项，彻底避免重复复制代码的问题，同时大幅提升维护性。

步骤1：定义导航项数据模型 #

先创建一个包含导航项必要属性的类，同时增加权限判断字段：

class NavItem {
  final IconData icon;
  final String label;
  final String routeName;
  // 可选：用bool示例权限要求，也可替换为枚举/权限字符串提升扩展性
  final bool requiresCreateUserPermission;

  const NavItem({
    required this.icon,
    required this.label,
    required this.routeName,
    this.requiresCreateUserPermission = false,
  });
}

步骤2：封装自适应底部导航栏组件 #

在组件中接收用户权限参数，动态过滤并构建导航项：

class AdaptiveBottomNavBar extends StatelessWidget {
  final int currentIndex;
  final ValueChanged<int> onTap;
  final bool hasCreateUserPermission;

  // 全局定义所有可能的导航项
  static const List<NavItem> _allNavItems = [
    NavItem(
      icon: Icons.home,
      label: '首页',
      routeName: '/home',
    ),
    NavItem(
      icon: Icons.list,
      label: '列表',
      routeName: '/list',
    ),
    NavItem(
      icon: Icons.person_add,
      label: '创建用户',
      routeName: '/create-user',
      requiresCreateUserPermission: true,
    ),
    NavItem(
      icon: Icons.settings,
      label: '设置',
      routeName: '/settings',
    ),
  ];

  const AdaptiveBottomNavBar({
    super.key,
    required this.currentIndex,
    required this.onTap,
    required this.hasCreateUserPermission,
  });

  @override
  Widget build(BuildContext context) {
    // 根据权限过滤导航项
    final filteredItems = _allNavItems.where((item) {
      if (item.requiresCreateUserPermission) {
        return hasCreateUserPermission;
      }
      return true;
    }).toList();

    return BottomNavigationBar(
      currentIndex: currentIndex,
      onTap: onTap,
      items: filteredItems.map((item) {
        return BottomNavigationBarItem(
          icon: Icon(item.icon),
          label: item.label,
        );
      }).toList(),
    );
  }
}

步骤3：使用组件 #

在页面中只需传入用户权限状态即可，无需重复编写导航栏代码：

// 普通用户（无创建权限）
AdaptiveBottomNavBar(
  currentIndex: _selectedIndex,
  onTap: _onItemTapped,
  hasCreateUserPermission: false,
)

// 管理员（有创建权限）
AdaptiveBottomNavBar(
  currentIndex: _selectedIndex,
  onTap: _onItemTapped,
  hasCreateUserPermission: true,
)

额外优化建议 #

• 用枚举定义权限类型（如UserPermission.createUser），替代bool，支持多权限组合判断。
• 将权限过滤逻辑抽成单独工具方法（如PermissionFilter.filterNavItems(List<NavItem> items, UserPermissions permissions)），便于复用和单元测试。
• 如果导航项显示逻辑复杂，可在NavItem中定义bool Function(UserPermissions) visibilityChecker，灵活定制显示条件。

内容的提问来源于stack exchange，提问作者Gautier Chuinard