Flutter中如何使用Router+RouterDelegate实现路由管理

在Flutter中使用Router+RouterDelegate实现路由管理时遇到几个问题：

  1. RouterDelegate的build方法如何正确返回页面栈？是否需要手动维护路由历史？
  2. 如何通过Router.pushNamed等方法传递参数到新路由页面？
  3. 如何实现浏览器的前进/后退按钮与自定义路由的同步？
  4. 嵌套路由场景下RouterDelegate该如何设计？求具体代码示例。
2 回复

在Flutter中使用Router和RouterDelegate实现路由管理：

  1. 自定义RouterDelegate，继承自RouterDelegate，重写setNewRoutePath和build方法
  2. 在build中返回Navigator，管理页面栈
  3. 创建Router组件，传入delegate
  4. 通过delegate.push/pop管理路由跳转

示例：

MaterialApp.router(
  routerDelegate: MyRouterDelegate(),
)

更多关于Flutter中如何使用Router+RouterDelegate实现路由管理的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中，使用Router和RouterDelegate可以实现高级路由管理，支持Web URL和深度链接。以下是实现步骤：

1. 定义路由配置

创建路由配置类，定义路径与页面的映射关系：

class AppRouteConfiguration {
  final String path;
  final Map<String, dynamic>? params;

  AppRouteConfiguration(this.path, {this.params});
}

2. 实现RouterDelegate

继承RouterDelegate，处理路由状态和导航逻辑：

class AppRouterDelegate extends RouterDelegate<AppRouteConfiguration>
    with PopNavigatorRouterDelegateMixin<AppRouteConfiguration> {
  final GlobalKey<NavigatorState> navigatorKey;
  List<Page> _pages = [];

  AppRouterDelegate() : navigatorKey = GlobalKey<NavigatorState>();

  @override
  AppRouteConfiguration? get currentConfiguration {
    if (_pages.isEmpty) return null;
    final route = _pages.last;
    return AppRouteConfiguration(route.name ?? '');
  }

  @override
  Widget build(BuildContext context) {
    return Navigator(
      key: navigatorKey,
      pages: _pages,
      onPopPage: (route, result) {
        if (!route.didPop(result)) return false;
        _pages.removeLast();
        return true;
      },
    );
  }

  @override
  Future<void> setNewRoutePath(AppRouteConfiguration configuration) async {
    _pages = _createPages(configuration);
  }

  List<Page> _createPages(AppRouteConfiguration configuration) {
    switch (configuration.path) {
      case '/home':
        return [MaterialPage(child: HomePage(), name: '/home')];
      case '/details':
        return [
          MaterialPage(child: HomePage(), name: '/home'),
          MaterialPage(child: DetailsPage(), name: '/details'),
        ];
      default:
        return [MaterialPage(child: NotFoundPage(), name: '/404')];
    }
  }

  void push(String path) {
    _pages.addAll(_createPages(AppRouteConfiguration(path)));
    notifyListeners();
  }

  void pop() {
    if (_pages.isNotEmpty) _pages.removeLast();
    notifyListeners();
  }
}

3. 实现RouteInformationParser

解析路由信息：

class AppRouteInformationParser extends RouteInformationParser<AppRouteConfiguration> {
  @override
  Future<AppRouteConfiguration> parseRouteInformation(
      RouteInformation routeInformation) async {
    final uri = Uri.parse(routeInformation.location ?? '/');
    return AppRouteConfiguration(uri.path);
  }

  @override
  RouteInformation? restoreRouteInformation(AppRouteConfiguration configuration) {
    return RouteInformation(location: configuration.path);
  }
}

4. 在MaterialApp中配置

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

class MyApp extends StatelessWidget {
  final _routerDelegate = AppRouterDelegate();
  final _routeInformationParser = AppRouteInformationParser();

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routerDelegate: _routerDelegate,
      routeInformationParser: _routeInformationParser,
    );
  }
}

使用方式

// 导航到新页面
_routerDelegate.push('/details');

// 返回上一页
_routerDelegate.pop();

关键点说明

  • RouterDelegate：管理导航堆栈和页面状态
  • RouteInformationParser：处理URL与路由配置的转换
  • MaterialApp.router：启用基于Router的导航

这种方法支持浏览器前进/后退、直接URL访问，适合需要深度链接和Web支持的复杂应用。

回到顶部