Flutter 路由&页面传参

最新推荐文章于 2025-06-12 08:10:43 发布

原创

最新推荐文章于 2025-06-12 08:10:43 发布 · 2.8k 阅读

收录于

本文介绍了Flutter中的动态路由概念，强调了其在页面跳转中的应用，并详细阐述了如何通过动态路由实现参数传递，类似于构造函数传参的方式。

需求梳理

1、如何进行页面跳转
2、页面跳转时如何进行传值
3、参数回传

1 页面跳转

Flutter中分2种路由，分别是静态路由和动态路由

// 静态路由示列子

// step 1、---> 声明路由
class RoutePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: "route_index",
      home: MyRouteMainPage(title: 'Route inedex Page'),

      routes: <String, WidgetBuilder> {
        // 声明路由静态路由，不能传递参数
        '/router/routeone': (_) => new RoutOnePage(),
        '/router/routetwo': (_) => new RouteTwo(),
      },
    );
  }
}

// step 2、---> 调用路由，进行跳转

a、不需要返回值的跳转
Navigator.of(context).pushNamed('/router/routeone');

b、需要返回值的跳转
// 带返回值
Navigator.of(context).pushNamed('/router/routeone').then((value) {
    // dialog显示返回值
    _showDialog(context, value);
})

//跳转回去前传递参数给上一个页面
Navigator.of(context).pop('这个是要返回给上一个页面的数据');

带返回值的跳转，传递数据是任意结构的，支持泛型