Flutter Web本地路由自定义布局下URL修改及页面链接分享问题咨询

没问题，我帮你搞定这个Flutter Web的路由同步问题！你遇到的核心问题是嵌套路由的URL同步——BaseLayout作为父容器（顶部导航+侧边栏）保持不动，内容区切换页面时URL也要跟着更新，这样分享链接才能直接跳转到对应页面。下面是具体的实现方案：

1. 定义路由状态模型 #

首先我们需要一个类来管理路由状态，把BaseLayout的子路由信息和URL绑定起来：

class AppRoute {
  final String subRoute;

  // 默认进入Dashboard页面
  AppRoute({this.subRoute = '/dashboard'});

  // 从URL解析路由状态
  AppRoute.fromRouteInformation(RouteInformation info)
      : subRoute = info.location?.replaceFirst('/base', '') ?? '/dashboard';

  // 把路由状态转化为URL信息
  RouteInformation toRouteInformation() {
    return RouteInformation(location: '/base$subRoute');
  }
}

2. 实现路由信息解析器 #

这个类负责把URL字符串解析成我们定义的AppRoute状态，反过来也能把状态转化为URL：

class AppRouteInformationParser extends RouteInformationParser<AppRoute> {
  @override
  Future<AppRoute> parseRouteInformation(RouteInformation routeInformation) async {
    return AppRoute.fromRouteInformation(routeInformation);
  }

  @override
  RouteInformation restoreRouteInformation(AppRoute configuration) {
    return configuration.toRouteInformation();
  }
}

3. 实现路由委托（核心部分） #

RouterDelegate负责管理整个应用的路由逻辑，监听路由变化并更新页面，同时保持BaseLayout不重新渲染：

class AppRouterDelegate extends RouterDelegate<AppRoute>
    with ChangeNotifier, PopNavigatorRouterDelegateMixin<AppRoute> {
  // Navigator的全局Key，用来管理页面栈
  final GlobalKey<NavigatorState> navigatorKey = GlobalKey<NavigatorState>();
  // 当前激活的子路由
  String currentSubRoute = '/dashboard';

  @override
  Widget build(BuildContext context) {
    return Navigator(
      key: navigatorKey,
      pages: [
        // BaseLayout作为固定的父页面，永远在页面栈的最底层
        MaterialPage(
          child: BaseLayout(
            currentSubRoute: currentSubRoute,
            onSubRouteChanged: (newRoute) {
              currentSubRoute = newRoute;
              notifyListeners(); // 通知路由更新URL
            },
          ),
        ),
      ],
      onPopPage: (route, result) {
        if (!route.didPop(result)) return false;
        // 处理浏览器的返回按钮，默认回到Dashboard
        currentSubRoute = '/dashboard';
        notifyListeners();
        return true;
      },
    );
  }

  @override
  Future<void> setNewRoutePath(AppRoute configuration) async {
    // 当URL变化时，更新当前子路由
    currentSubRoute = configuration.subRoute;
    notifyListeners();
  }
}

4. 修改BaseLayout组件 #

让BaseLayout根据当前子路由渲染对应的内容页面，同时侧边栏点击时触发路由更新：

class BaseLayout extends StatelessWidget {
  final String currentSubRoute;
  final Function(String) onSubRouteChanged;

  const BaseLayout({
    Key? key,
    required this.currentSubRoute,
    required this.onSubRouteChanged,
  }) : super(key: key);

  // 根据子路由返回对应内容页面
  Widget _getContentPage() {
    switch (currentSubRoute) {
      case '/dashboard':
        return Dashboard();
      case '/overview':
        return Overview();
      case '/manage-drivers':
        return ManageDrivers();
      case '/manage-transactions':
        return ManageTransactions();
      default:
        return Dashboard();
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('我的Flutter Web应用')),
      drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: [
            const DrawerHeader(
              decoration: BoxDecoration(color: Colors.blue),
              child: Text('导航菜单', style: TextStyle(color: Colors.white)),
            ),
            ListTile(
              title: const Text('仪表盘'),
              selected: currentSubRoute == '/dashboard',
              onTap: () {
                onSubRouteChanged('/dashboard');
                Navigator.pop(context); // 关闭侧边抽屉
              },
            ),
            ListTile(
              title: const Text('概览'),
              selected: currentSubRoute == '/overview',
              onTap: () {
                onSubRouteChanged('/overview');
                Navigator.pop(context);
              },
            ),
            ListTile(
              title: const Text('司机管理'),
              selected: currentSubRoute == '/manage-drivers',
              onTap: () {
                onSubRouteChanged('/manage-drivers');
                Navigator.pop(context);
              },
            ),
            ListTile(
              title: const Text('交易管理'),
              selected: currentSubRoute == '/manage-transactions',
              onTap: () {
                onSubRouteChanged('/manage-transactions');
                Navigator.pop(context);
              },
            ),
          ],
        ),
      ),
      body: _getContentPage(), // 内容区渲染当前子路由页面
    );
  }
}

5. 配置MaterialApp使用自定义路由 #

最后把我们的路由组件集成到应用入口：

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      title: 'Flutter Web 路由示例',
      // 使用我们自定义的路由委托和解析器
      routerDelegate: AppRouterDelegate(),
      routeInformationParser: AppRouteInformationParser(),
      // 如果需要Path模式（不带#），可以添加下面的配置
      routeInformationProvider: PlatformRouteInformationProvider(
        initialRouteInformation: const RouteInformation(location: '/base/dashboard'),
      ),
    );
  }
}

效果说明 #

• 点击侧边栏菜单项时，内容区会切换对应页面，同时URL会更新为/base/dashboard、/base/overview等格式
• 直接访问这些URL时，应用会自动解析路由，BaseLayout保持不变，内容区直接渲染对应的页面
• 浏览器的返回按钮也能正常工作，回到上一个子路由页面

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