有时候页面转跳需要将数据发送到第二个页面，就类似于安卓里的 Intent 携带数据传入第二个活动。Flutter 页面传送数据和安卓原生方法不同，由于 Flutter 每一个页面都是一个类，进入一个新的页面也就意味着构造了一个新的对象，那自然页面传递参数就是有参构造函数构造对象了。但如果数据比较多，那就可以将数据封装在一个数据类中，然后在第二个页面的类中声明数据类对象作为成员变量。
在下面的例子中将创建一个文章列表，当点击一个文章时将进入一个新的页面显示新闻的详情。
1 .首先定义一个文章类
class Article {
final String title;
final String content;
Article({this.title, this.content});
}
2 .创建文章列表
首先生成文章列表。
final List<Article> list = new List.generate(
50,
(i) => new Article(title : "标题$i", content : "这是内容$i")，
);
使用 ListView 显示文章列表。
ListView.builder(
itemCount: list.length,
itemBuilder: (context,index) {
return new ListTile(
title: new Text(list[index].title)，
);
},
),
3 .导航并将数据传递给详情页。
Navigator.push(
context,
new MaterialPageRoute(builder: (context) => new ArticleInfo(article: list[index])),
);
4 .生成文章列表页面。
class MyApp extends StatelessWidget {
//构造list，泛型为Article
final List<Article> list = new List.generate(
50,
(i) => new Article(title : "标题$i", content : "这是内容$i"),
);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('路由发送数据demo'),
),
body: ListView.builder(
itemCount: list.length,
itemBuilder: (context,index) {
return new ListTile(
title: new Text(list[index].title),
//列表的点击事件
onTap: () {
Navigator.push(
context,
new MaterialPageRoute(builder: (context) => new ArticleInfo(article: list[index])),
);
},
);
},
),
);
}
}
5 .生成文章详情页页面。
class ArticleInfo extends StatelessWidget {
final Article article;
ArticleInfo({this.article});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(article.title),
),
body: Center(
child: Text(article.content),
),
floatingActionButton: FloatingActionButton(
child: Text('返回'),
onPressed: () {
Navigator.pop(context);
},
),
);
}
}
6 .主函数。
void main() => runApp(
new MaterialApp(
home: MyApp(),
)
);
效果图如下：
扫描二维码关注公众号，回复：
9502230 查看本文章
