Flutter跳转页面的方式

最新推荐文章于 2025-06-04 11:56:21 发布

原创最新推荐文章于 2025-06-04 11:56:21 发布 · 6k 阅读

3 ·

CC 4.0 BY-SA版权

flutter 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了在Flutter中实现页面跳转的多种方法，包括有返回的跳转和不返回的跳转，以及如何使用Navigator类进行页面切换。通过具体的代码示例，读者可以了解到如何在实际项目中应用这些跳转技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Flutter跳转页面的方式

一.跳转其他页面有返回
二.跳转其他页面不返回(从路由栈中移除本页面)

一.跳转其他页面有返回

    //第一种
    Navigator.push(context, CupertinoPageRoute(builder: (context){
  			return new Page();
	 }));
	 
	//第二种
	Navigator.of(context).push(new MaterialPageRoute(builder: (context) {
            return new Page();
     }));
     
	//第三种
	void main() => runApp(new MyApp());
	class MyApp extends StatelessWidget {
 		 @override
 		 Widget build(BuildContext context) {
   			 return new MaterialApp(
    		  routes: {
      		 //Map<String, WidgetBuilder>
	   		 "/splash": (context) => new SplashPage(),
       		 "/login": (context) => new LoginPage(),
       		 "/home": (context) => new HomePage(),
       		 "/detail": (context) => new DetailPage(),
     		 },
		      onUnknownRoute: (RouteSettings setting) {
		        String name = setting.name;
		        print("onUnknownRoute:$name");
		        return new MaterialPageRoute(builder: (context) {
		          return new NotFoundPage();
		        });
		      },
		      title: 'Flutter Demo',
		      theme: new ThemeData(
		        primarySwatch: Colors.blue,
		      ),
		      home: new SplashPage(),
		    );
	  	}
	}
		//弹出路由，跳转到其他页面
	 	Navigator.of(context).pushNamed("/detail");


	//这是返回方法
	 Navigator.pop(context);

二.跳转其他页面不返回(从路由栈中移除本页面)

//第一种
Navigator.of(context).pushReplacementNamed("/login");

//第二种
Navigator.pushAndRemoveUntil( context, new MaterialPageRoute(builder: (context) => new Page()),(route) => route == null,);

//第三种
Navigator.of(context).pushNamedAndRemoveUntil("/login", (Route<dynamic> route) => false);