跳转传值是再普通不过的小功能了,在开发中会经常用到,比如列表进入详情。
效果:
1、跳转
比如在onTap事件中处理跳转。
为了导航到新的页面,我们需要调用Navigator.push方法。 该push方法将添加Route到由导航器管理的路由栈中!
该push方法需要一个Route,但Route从哪里来?我们可以创建自己的,或直接使用MaterialPageRoute。 MaterialPageRoute很方便,因为它使用平台特定的动画跳转到新的页面(Android和IOS屏幕切换动画会不同)。
onTap: () { Navigator.push( context, new MaterialPageRoute(builder: (context) => new ArticleDetail(), ); },
ArticleDetail就是要跳转的详情页
2、传值
传值的话相当于Java中的构造方法
ArticleDetail页面此时相当于是一个方法,传入参数即可
onTap: () { Navigator.push( context, new MaterialPageRoute(builder: (context) => new ArticleDetail(title:_datas[i].title,url: _datas[i].link)), ); },
传入了两个参数,title和url,传参形式为 key:参数
3、接收
先添加一个ArticleDetail构造方法,
class ArticleDetail extends StatelessWidget { String url, title; ArticleDetail({Key key, @required this.title, @required this.url}) : super(key: key); }
有两个@required修饰的必须参数,即title和url,this.title和this.url直接指向自定义的参数,传入即赋值,即可直接引用,比如${title} 。
这里是两个String,对象同理。
详情完整代码:
class ArticleDetail extends StatelessWidget { String url, title; ArticleDetail({Key key, @required this.title, @required this.url}) : super(key: key); @override Widget build(BuildContext context) { return new MaterialApp( theme: ThemeData( primaryColor: YColors.colorPrimary, primaryColorDark: YColors.colorPrimaryDark, ), routes: { "/": (_) => new WebviewScaffold( url: "${url}", appBar: new AppBar( leading: new IconButton( icon: Icon(Icons.arrow_back), onPressed: () { Navigator.maybePop(context); }), title: new Text("${title}"), ), ), }, ); } }
官方文档:https://flutter.dev/docs/cookbook/navigation/passing-data