2025 年 Flutter 导航路由技术选型报告

import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';

void main() => runApp(const MyApp());

/// 定义路由配置
final GoRouter _router = GoRouter(
  routes: <RouteBase>[
    GoRoute(
      path: '/',
      builder: (BuildContext context, GoRouterState state) {
        return const HomePage();
      },
      routes: <RouteBase>[
        // 嵌套路由示例：/details
        GoRoute(
          path: 'details',
          builder: (BuildContext context, GoRouterState state) {
            return const DetailsPage();
          },
        ),
      ],
    ),
  ],
);

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    // 使用 MaterialApp.router 并配置 GoRouter
    return MaterialApp.router(
      title: 'GoRouter 示例',
      routerConfig: _router,
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('主页')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 通过 context.go 跳转到 '/details'
            context.go('/details');
          },
          child: const Text('跳转到详情页'),
        ),
      ),
    );
  }
}

class DetailsPage extends StatelessWidget {
  const DetailsPage({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('详情页')),
      body: const Center(child: Text('这是详情页')),
    );
  }
}

import 'package:flutter/material.dart';
import 'package:auto_route/auto_route.dart';

/// 使用注解定义路由配置
@AutoRouterConfig()
class AppRouter extends $AppRouter {} // $AppRouter 会被代码生成

void main() {
  final _appRouter = AppRouter(); // 生成的路由管理器
  runApp(MyApp(appRouter: _appRouter));
}

class MyApp extends StatelessWidget {
  final AppRouter appRouter;
  const MyApp({required this.appRouter, Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      title: 'AutoRoute 示例',
      routerDelegate: appRouter.delegate(),
      routeInformationParser: appRouter.defaultRouteParser(),
    );
  }
}

/// 路由定义（位于其他文件），会由自动生成器生成对应的路由类
/// 注意：这只是示意，实际需配合 build_runner 生成器使用
class AppRouter extends RootStackRouter {
  @override
  final List<AutoRoute> routes = [
    AutoRoute(path: '/', page: HomePage),
    AutoRoute(path: '/details/:id', page: DetailsPage),
    AutoRoute(path: '/login', page: LoginPage, guards: [AuthGuard]),
  ];
}

/// 页面使用示例：使用生成的 DetailsRoute 进行导航，参数强类型
class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('主页')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 使用生成的路由类进行导航，并传递参数
            context.router.push(DetailsRoute(id: '123'));
          },
          child: const Text('查看详情'),
        ),
      ),
    );
  }
}

class DetailsPage extends StatelessWidget {
  final String id;
  const DetailsPage({@PathParam('id') required this.id, Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('详情')),
      body: Center(child: Text('详情ID: $id')),
    );
  }
}

import 'package:flutter/material.dart';
import 'package:navigation_utils/navigation_utils.dart';

/// 全局路由配置
final List<NavigationData> routes = [
  NavigationData(
    // 匹配根路径
    url: '/',
    builder: (context, data, globalData) => const HomePage(),
  ),
  NavigationData(
    // 匹配/projects
    label: ProjectsPage.name,
    url: '/projects',
    builder: (context, data, globalData) => const ProjectsPage(),
  ),
];

void main() {
  // 初始化 NavigationManager
  NavigationManager.init(
    mainRouterDelegate: DefaultRouterDelegate(navigationDataRoutes: routes),
    routeInformationParser: DefaultRouteInformationParser(),
  );
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      title: 'NavigationUtils 示例',
      // 使用全局的 RouterDelegate 和 RouteInformationParser
      routerDelegate: NavigationManager.instance.routerDelegate,
      routeInformationParser: NavigationManager.instance.routeInformationParser,
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('首页')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 通过 NavigationManager 执行命名导航
            NavigationManager.instance.pushNamed(ProjectsPage.name);
          },
          child: const Text('跳转到项目页'),
        ),
      ),
    );
  }
}

class ProjectsPage extends StatelessWidget {
  static const String name = 'projects';
  const ProjectsPage({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('项目页')),
      body: const Center(child: Text('这是项目页')),
    );
  }
}

import 'package:flutter/material.dart';
import 'package:qlevar_router/qlevar_router.dart';

/// 定义路由配置
class AppRoutes {
  // 根路由列表
  static final routes = [
    QRoute(path: '/', builder: () => const HomePage()),
    QRoute(
      path: '/user/:userId',
      builder: () => const UserPage(),
      children: [
        QRoute(path: '/settings', builder: () => const SettingsPage()),
        QRoute(path: '/profile', builder: () => const ProfilePage()),
      ],
    ),
    QRoute(path: '/products/:id', builder: () => const ProductDetails()),
  ];
}

void main() {
  // 设置Web URL策略（可选）
  QR.setUrlStrategy();
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      title: 'QlevarRouter 示例',
      routeInformationParser: const QRouteInformationParser(),
      routerDelegate: QRouterDelegate(AppRoutes.routes),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('主页')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 无需上下文导航到用户设置页
            QR.to('/user/123/settings');
          },
          child: const Text('跳转到用户123的设置页'),
        ),
      ),
    );
  }
}

import 'package:flutter/material.dart';

// 自定义路由路径对象
class MyRoutePath {
  final String location;
  MyRoutePath(this.location);
}

// 路由解析器
class MyRouteParser extends RouteInformationParser<MyRoutePath> {
  @override
  Future<MyRoutePath> parseRouteInformation(RouteInformation info) async {
    final uri = Uri.parse(info.location ?? '/');
    return MyRoutePath(uri.path);
  }
}

// RouterDelegate 实现
class MyRouterDelegate extends RouterDelegate<MyRoutePath>
    with ChangeNotifier, PopNavigatorRouterDelegateMixin<MyRoutePath> {
  @override
  final GlobalKey<NavigatorState> navigatorKey = GlobalKey<NavigatorState>();
  // 简单页面栈示例
  final List<Page> _pages = [MaterialPage(child: HomePage(), key: const ValueKey('Home'))];

  @override
  Widget build(BuildContext context) {
    return Navigator(
      key: navigatorKey,
      pages: List.of(_pages),
      onPopPage: (route, result) {
        if (!route.didPop(result)) return false;
        // 处理返回
        _pages.removeLast();
        notifyListeners();
        return true;
      },
    );
  }

  @override
  Future<void> setNewRoutePath(MyRoutePath configuration) async {
    // 根据路径创建新页面，可自定义逻辑
    if (configuration.location == '/details') {
      _pages.add(const MaterialPage(child: DetailsPage(), key: ValueKey('Details')));
    }
  }

  @override
  MyRoutePath? get currentConfiguration {
    // 返回当前路径用于更新地址栏
    final name = _pages.last.name;
    return MyRoutePath(name ?? '/');
  }
}

void main() {
  runApp(MaterialApp.router(
    routerDelegate: MyRouterDelegate(),
    routeInformationParser: MyRouteParser(),
  ));
}