1.简介
Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界，Flutter正在被越来越多的开发者和组织使用，并且Flutter是完全免费、开源的。因为有google的支持我认为还是有必要学习的。
2.首先我建一个实体类，模拟网络请求，代码如下
class Proaduct{
final String title;
final String desc;
Proaduct(this.title,this.desc);
}
3.新建一个main主函数：
void main() => runApp(MyApp());
4.新建一个类继承StatelessWidget（无状态的widget）
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
title: '导航数据',
//模拟生产20条数据复制给proadlists集合，再将proadlists传递给ProaductList页面
home:ProaductList(proadlists: List.generate(20,(i)=>Proaduct("标题:$i","这个是商品详情:$i"))) ,
);
}
}
5.新建ProaductList方法，将数据显示到页面上
class ProaductList extends StatelessWidget{
List<Proaduct> proadlists;
//接收参数
ProaductList({Key key,@required this.proadlists}):super(key:key);
@override
Widget build(BuildContext context) {
// TODO: implement build
//显示数据
return Scaffold(
appBar: new AppBar(title: new Text("商品列表"),),
body: ListView.builder(
itemBuilder: (context,index){
return ListTile(
title: new Text(proadlists[index].title),
//点击事件
onTap: (){
//定义一个私有方法
_NavigateToDetial(context,index);
},
);
},
itemCount: proadlists.length,
),
);
}
通过Navigator.push跳转到 ProductDetail 详情页面，并将数组的元素传递给详情。
result：接收上一个页面传递的参数
_NavigateToDetial(BuildContext context,index) async
{
//接收返回参数
final result=await Navigator.push(context, MaterialPageRoute(builder: (context)=>ProductDetail(proaduct:proadlists[index])));
在页面下方提示
Scaffold.of(context).showSnackBar(SnackBar(content: new Text('$result')));
}
}
6.详情页的的实现
class ProductDetail extends StatelessWidget{
Proaduct proaduct;
//结束参数
ProductDetail({Key key,@required this.proaduct}):super(key:key);
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar:new AppBar(
title: new Text('${proaduct.title}'),
) ,
body: Center(
child: Column(
children: <Widget>[
Text('${proaduct.desc}'),
RaisedButton(
child: new Text("返回"),
onPressed: (){
//返回页面，需要将所传递参数直接放到pop(context,"所需传递数据")
Navigator.pop(context,'${proaduct.desc}');
}
)
],
),
),
);
}
}
7.效果如下
1.首页列表
2.详情页
3.点击返回效果
