面试题：Flutter沉浸式导航在复杂业务场景下Navigator与MaterialPageRoute的定制拓展

设计思路

用户角色处理：
- 不同用户角色可能有不同的导航权限和页面访问规则。可以通过创建一个UserRole枚举，如enum UserRole { admin, regularUser, guest }。
- 在导航逻辑中，根据当前用户角色来决定是否能够导航到特定页面。例如，只有admin角色可以访问管理相关页面。
动态页面生成：
- 对于动态页面生成，创建一个页面工厂函数。该函数可以根据传入的参数（如页面类型、数据等）生成相应的页面实例。例如，Widget generateDynamicPage(PageType pageType, dynamic data)。
- 在导航时，根据业务逻辑调用这个工厂函数来生成需要的页面。
Navigator定制：
- 创建一个自定义的NavigatorObserver来监听导航事件。例如，在用户角色切换时，检查当前导航栈中是否有不应该访问的页面，如果有则进行处理（如弹出这些页面）。
- 可以封装一个自定义的导航方法，该方法整合了用户角色检查和动态页面生成逻辑，方便在应用中统一调用。
MaterialPageRoute拓展：
- 继承MaterialPageRoute类，重写其buildPage方法。在buildPage方法中，可以根据业务需求对页面进行额外的初始化或配置。例如，根据用户角色设置页面的初始状态。
- 可以在自定义的MaterialPageRoute中添加一些额外的属性，如PageType，用于标记页面类型，方便在导航逻辑中使用。

实现步骤

定义用户角色枚举和相关数据结构：

enum UserRole {
  admin,
  regularUser,
  guest
}

class User {
  UserRole role;
  User(this.role);
}

创建页面工厂函数：

Widget generateDynamicPage(PageType pageType, dynamic data) {
  switch (pageType) {
    case PageType.home:
      return HomePage(data: data);
    case PageType.adminDashboard:
      return AdminDashboardPage(data: data);
    // 其他页面类型的处理
    default:
      return Container();
  }
}

enum PageType {
  home,
  adminDashboard
}

定制NavigatorObserver：

class CustomNavigatorObserver extends NavigatorObserver {
  User user;
  CustomNavigatorObserver(this.user);

  @override
  void didPush(Route<dynamic> route, Route<dynamic>? previousRoute) {
    if (route is CustomMaterialPageRoute) {
      if (!canAccessPage(user.role, route.pageType)) {
        // 处理不允许访问的情况，如弹出当前页面
        Navigator.of(route.navigatorKey.currentContext!).pop();
      }
    }
  }
}

bool canAccessPage(UserRole role, PageType pageType) {
  switch (role) {
    case UserRole.admin:
      return true;
    case UserRole.regularUser:
      return pageType != PageType.adminDashboard;
    case UserRole.guest:
      return pageType == PageType.home;
  }
  return false;
}

拓展MaterialPageRoute：

class CustomMaterialPageRoute extends MaterialPageRoute {
  PageType pageType;
  CustomMaterialPageRoute({
    required WidgetBuilder builder,
    required this.pageType,
    RouteSettings? settings,
  }) : super(builder: builder, settings: settings);

  @override
  Widget buildPage(BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation) {
    // 可以在此根据用户角色或其他逻辑对页面进行初始化
    return super.buildPage(context, animation, secondaryAnimation);
  }
}

使用定制的Navigator和MaterialPageRoute：

class MyApp extends StatelessWidget {
  final User user = User(UserRole.regularUser);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      navigatorObservers: [CustomNavigatorObserver(user)],
      home: Scaffold(
        appBar: AppBar(
          title: Text('Custom Navigation'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              Navigator.push(
                context,
                CustomMaterialPageRoute(
                  pageType: PageType.home,
                  builder: (context) => generateDynamicPage(PageType.home, 'Some data'),
                ),
              );
            },
            child: Text('Navigate'),
          ),
        ),
      ),
    );
  }
}

面试题：Flutter沉浸式导航在复杂业务场景下Navigator与MaterialPageRoute的定制拓展

知识考点

面试题答案

设计思路

实现步骤