flutter如何实现路由功能

在Flutter中如何实现路由功能？具体应该使用哪个类或方法？能否提供基本的路由配置示例代码？另外，如何实现页面跳转时的传参和接收返回值？

2 回复

Flutter 使用 Navigator 管理路由。通过 Navigator.push() 跳转新页面，Navigator.pop() 返回。可配合命名路由在 MaterialApp 中定义 routes 属性，实现页面切换和参数传递。

更多关于flutter如何实现路由功能的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中，路由功能主要通过Navigator组件实现，用于页面之间的跳转和管理。以下是核心实现方法：

1. 基本路由跳转

// 跳转到新页面
Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => TargetPage()),
);

// 返回上一页
Navigator.pop(context);

2. 命名路由（推荐）

在MaterialApp中配置路由表：

MaterialApp(
  initialRoute: '/',
  routes: {
    '/': (context) => HomePage(),
    '/detail': (context) => DetailPage(),
    '/profile': (context) => ProfilePage(),
  },
);

使用命名路由跳转：

Navigator.pushNamed(context, '/detail');

// 带参数传递
Navigator.pushNamed(
  context,
  '/detail',
  arguments: {'id': 123, 'title': '示例'},
);

// 在目标页面接收参数
class DetailPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final args = ModalRoute.of(context)!.settings.arguments as Map;
    return Scaffold(
      body: Text('ID: ${args['id']}'),
    );
  }
}

3. 路由返回值

// 跳转并等待返回值
final result = await Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => SelectionPage()),
);

// 返回时传递数据
Navigator.pop(context, '返回的数据');

4. 路由管理包（高级用法）

对于复杂应用，建议使用go_router或auto_route等第三方包：

dependencies:
  go_router: ^12.0.0

final router = GoRouter(
  routes: [
    GoRoute(
      path: '/',
      builder: (context, state) => HomePage(),
    ),
    GoRoute(
      path: '/detail/:id',
      builder: (context, state) => DetailPage(id: state.params['id']),
    ),
  ],
);

// 在MaterialApp中使用
MaterialApp.router(
  routerConfig: router,
);

关键特点：

  • push：压入新页面
  • pop：退出当前页面
  • 支持页面间数据传递
  • 提供前进/后退堆栈管理
  • 支持路由拦截和权限控制

对于简单应用使用基本路由即可，复杂应用建议采用命名路由或第三方路由库来更好地管理页面导航。

回到顶部