flutter如何实现页面跳转

在Flutter中如何实现页面跳转？有没有详细的代码示例？Navigator.push的具体用法是怎样的？不同页面之间如何传递参数？能否提供完整的跳转流程说明？

2 回复

Flutter中使用Navigator实现页面跳转。

  • 跳转新页面：Navigator.push(context, MaterialPageRoute(builder: (context) => NewPage()));
  • 返回上一页：Navigator.pop(context);
  • 可传参和接收返回值。

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


在Flutter中，页面跳转主要通过Navigator实现。以下是常用的方法：

1. 基本跳转（MaterialApp/CupertinoApp）

// 跳转到新页面
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(
      appBar: AppBar(title: Text(args['title'])),
      body: Text('ID: ${args['id']}'),
    );
  }
}

3. 替换当前页面

Navigator.pushReplacement(
  context,
  MaterialPageRoute(builder: (context) => NewPage()),
);

// 命名路由版本
Navigator.pushReplacementNamed(context, '/newpage');

4. 清除所有页面并跳转

Navigator.pushAndRemoveUntil(
  context,
  MaterialPageRoute(builder: (context) => MainPage()),
  (route) => false,
);

// 命名路由版本
Navigator.pushNamedAndRemoveUntil(
  context, 
  '/main', 
  (route) => false
);

5. 返回结果

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

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

注意事项

  • 确保在BuildContext可用的地方使用Navigator
  • 使用命名路由便于管理和维护
  • 考虑使用路由管理包（如go_router）处理复杂导航

这些方法覆盖了大部分页面跳转需求，根据具体场景选择合适的方式。

回到顶部