Flutter实现页面跳转切换（路由）

在移动开发中页面跳转也被称为导航管理，也就是路由，在Flutter中是如何实现的呢

import 'package:flutter/material.dart';///页面跳转
void main() => runApp(new FirstPage());class FirstPage extends StatefulWidget {@override_FirstPageState createState() => new _FirstPageState();
}class _FirstPageState extends State<FirstPage> {@overrideWidget build(BuildContext context) {return new MaterialApp(title: "第一个页面",home: Scaffold(appBar: AppBar(title: Text("第一个页面"),),body: RaisedButton(onPressed: () {///路由跳转Navigator.push(context, MaterialPageRoute(builder: (_) {return new SecondPage();}));}, child: Text("点击跳转第二个页面"),),),);}
}class SecondPage extends StatelessWidget {@overrideWidget build(BuildContext context) {return new MaterialApp(title: "第二个页面",home: Scaffold(body: Text("第二个页面"),),);}
}

按照上面的代码执行跳转会打印如下错误

以上错误出现在Navigator上

第一种解决方式

context传入MaterialApp下的context即可，代码如下

import 'package:flutter/material.dart';///页面跳转
void main() => runApp(new FirstPage());class FirstPage extends StatefulWidget {@override_FirstPageState createState() => new _FirstPageState();
}class _FirstPageState extends State<FirstPage> {@overrideWidget build(BuildContext context) {return new MaterialApp(title: "第一个页面",home: Builder(builder: buildScaffold), //Builder添加后才能跳转成功); //MaterialApp}
}///创建一个widget
Widget buildScaffold(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("第一个页面"),),body: RaisedButton(onPressed: () {Navigator.push(context, MaterialPageRoute(builder: (_) {return new SecondPage();}));}, child: Text("点击跳转第二个页面"),),); //Scaffo
}class SecondPage extends StatelessWidget {@overrideWidget build(BuildContext context) {///无需指定MaterialApp，使用的是第一个页面的风格，可指定AppBarreturn Scaffold(appBar: AppBar(title: Text("第二个页面"),),body: Text("第二个页面"),);}
}

第二种方式
采用分离的方式，代码如下

import 'package:flutter/material.dart';void main() => runApp(new PageOne());class PageOne extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(title: "页面一",home: new PageOneDetail(),);}
}class PageOneDetail extends StatelessWidget {///此处context为MaterialApp下的context@overrideWidget build(BuildContext context) {return new Scaffold(appBar: AppBar(title: Text("第一个页面"),),body: RaisedButton(onPressed: () {Navigator.push(context, MaterialPageRoute(builder: (_) {return PageTwo();}));}, child: Text("点我跳转"),),);}
}class PageTwo extends StatelessWidget {@overrideWidget build(BuildContext context) {return new Scaffold(appBar: AppBar(title: Text("第二个页面"),),body: Text("我是第二个页面"),);}
}

第三种采用命名路由的方法

import 'package:flutter/material.dart';void main() => runApp(new PageOne());class PageOne extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(title: "页面一",home: new PageOneDetail(),///注册路由表routes: {/// '/'是特殊地址，第一个页面"/": (context) => PageOne(),"/pageTwo": (context) => PageTwo(),},);}
}class PageOneDetail extends StatelessWidget {///此处context为MaterialApp下的context@overrideWidget build(BuildContext context) {return new Scaffold(appBar: AppBar(title: Text("第一个页面"),),body: RaisedButton(onPressed: () {Navigator.pushNamed(context, "/pageTwo");}, child: Text("点我跳转"),),);}
}class PageTwo extends StatelessWidget {@overrideWidget build(BuildContext context) {return new Scaffold(appBar: AppBar(title: Text("第二个页面"),),body: RaisedButton(onPressed: () {//路由pop弹出Navigator.pop(context, "结束");}, child: Text("我是第二个页面"),));}
}

上面的代码会报下面的错误

改成下面的代码即可

import 'package:flutter/material.dart';void main() => runApp(new PageOne());class PageOne extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(title: "页面一",///该处需要去掉下面已经指定了第一个页面
//      home: new PageOneDetail(),///注册路由表routes: {/// '/'是特殊地址，第一个页面"/": (context) => PageOneDetail(),"/pageTwo": (context) => PageTwo(),},);}
}class PageOneDetail extends StatelessWidget {///此处context为MaterialApp下的context@overrideWidget build(BuildContext context) {return new Scaffold(appBar: AppBar(title: Text("第一个页面"),),body: RaisedButton(onPressed: () async {///获取第二个页面返回的数据 相当于Activity 的onActivityResultvar pushNamed = await Navigator.pushNamed(context, "/pageTwo");debugPrint(pushNamed);}, child: Text("点我跳转"),),);}
}class PageTwo extends StatelessWidget {@overrideWidget build(BuildContext context) {return new Scaffold(appBar: AppBar(title: Text("第二个页面"),),body: RaisedButton(onPressed: () {//路由pop弹出，结束页面Navigator.pop(context, "结束返回");}, child: Text("我是第二个页面"),));}
}

项目地址https://github.com/shunplus/flutter_xu

Flutter实现页面跳转切换（路由）相关推荐

Android3个页面跳转代码,从零开始Android组件化改造（三） - 页面跳转与路由组件...
组件化与传统开发有一个很大的不同,就是模块件的跳转,如果使用传统的显式跳转,势必会极大造成模块之间的耦合,这在组件化的开发中是绝对不允许的,因此在组件化开发中我们必须选用隐式跳转,并且我们需要把所有的 ...
flutter刷新页面_Flutter BottomNavigationBar切换会刷新当前页面解决方
问题描述 BottomNavigationBar 是flutter 中最常用的UI组建,刚接触时发现在切换tab 的时候,会刷新当前的所有状态,每个页面都会重新刷新.于是乎,在这里先记录下解决方案. ...
若依前后端分离版(vue)中配置页面跳转的路由
场景若依前后端分离版本地搭建开发环境并运行项目的教程: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/108465662 在此基 ...
Flutter 页面跳转
目录一.基本路由(静态路由) 1.不传值跳转 2.传值跳转二.命名路由(动态路由) 1.不传值跳转 2.传值跳转效果图完整代码在Flutter中页面跳转被称之为'路由'. 是通过Naviga ...
【Flutter】Hero 动画 ( Hero 动画使用流程 | 创建 Hero 动画核心组件 | 创建源页面 | 创建目的页面 | 页面跳转 )
文章目录 ◯.Hero 动画简介一.创建 Hero 动画核心组件二.创建源页面三.创建目的页面四.页面跳转五.完整代码示例六.相关资源 ◯.Hero 动画简介 Hero Widget 动画 ...
androidstuio实现页面跳转_vue-router 基础：4类路由跳转示例
前言 <vue 基础>系列是再次回炉 vue 记的笔记,除了官网那部分知识点外,还会加入自己的一些理解.(里面会有部分和官网相同的文案,有经验的同学择感兴趣的阅读) 路由跳转,这属于路由参 ...
如何给Vue v-for循环渲染出的元素（导航栏）批量添加点击事件及点击后添加css类样式及点击后路由跳转切换
如何给Vue v-for循环渲染出的元素批量添加点击事件及点击后添加css类样式及点击后路由跳转切换能够实现或解决的问题给Vue v-for循环出的元素批量添加点击事件,并以自己在数组中 ...
阻止路由跳转得方式_vue路由拦截及页面跳转的设置方法
路由设置:router/index.js main.js: { if (to.matched.some(res => res.meta.requireAuth)) { // 验证是否需要登陆 i ...
【Android 组件化】路由组件 ( 页面跳转参数依赖注入 )
文章目录一.参数自动注入二.自定义注解三.使用 @Extra 自定义注解四.注解处理器解析 @Extra 自定义注解并生成相应 Activity 对应代码五.博客资源组件化系列博客 : ...

Flutter实现页面跳转切换（路由）

Flutter实现页面跳转切换（路由）相关推荐

最新文章

热门文章