导航参数的传递
我们还是使用Navigator组件，然后使用路由MaterialPageRoute传递参数，具体代码如下。
Navigator.push(
context,
MaterialPageRoute(
builder:(context)=>new ProductDetail(product:products[index])
)
);
这段代码要写在onTap相应事件当中。这时候ProductDetail会报错，因为我们还没有生命这个组件或者说是类。
子页面接受参数并显示
现在需要声明ProductDetail这个类（组件），先要作的就是接受参数，具体代码如下。
class ProductDetail extends StatelessWidget {
final Product product;
ProductDetail({Key key ,@required this.product}):super(key:key);
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: AppBar(
title:Text('${product.title}'),
),
body:Center(child: Text('${product.description}'),)
);
}
}
先接受了参数，并把数据显示在了页面中。
Demo全部代码如下
为了更好的帮助大家学习，我把所有的传递参数和接受参数的代码附在了下面。
import 'package:flutter/material.dart';
//传递的数据结构,也可以理解为对商品数据的抽象
class Product{
final String title; //商品标题
final String description; //商品描述
Product(this.title,this.description);
}
void main(){
runApp(MaterialApp(
title:'数据传递案例',
home:ProductList(
products:List.generate(
20,
(i)=>Product('商品 $i','这是一个商品详情，编号为:$i')
),
)
));
}
class ProductList extends StatelessWidget{
final List<Product> products;
ProductList({Key key,@required this.products}):super(key:key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title:Text('商品列表')),
body:ListView.builder(
itemCount:products.length,
itemBuilder: (context,index){
return ListTile(
title:Text(products[index].title),
onTap:(){
Navigator.push(
context,
MaterialPageRoute(
builder:(context)=>new ProductDetail(product:products[index])
)
);
}
);
},
)
);
}
}
class ProductDetail extends StatelessWidget {
final Product product;
ProductDetail({Key key ,@required this.product}):super(key:key);
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: AppBar(
title:Text('${product.title}'),
),
body:Center(child: Text('${product.description}'),)
);
}
}
页面跳转并返回数据
Dart中的异步请求和等待和ES6中的方法很像，直接使用async...await就可以实现。比如下面作了一个找小姐姐的方法，然后进行跳转，注意这时候是异步的。等待结果回来之后，我们再显示出来内容。具体代码如下：
_navigateToXiaoJieJie(BuildContext context) async{ //async是启用异步方法
final result = await Navigator.push(//等待
context,
MaterialPageRoute(builder: (context)=> XiaoJieJie())
);
Scaffold.of(context).showSnackBar(SnackBar(content:Text('$result')));
}
}
SnackBar的使用
SnackBar是用户操作后，显示提示信息的一个控件，类似Tost，会自动隐藏。SnackBar是以Scaffold的showSnackBar方法来进行显示的。
Scaffold.of(context).showSnackBar(SnackBar(content:Text('$result')));
返回数据的方式
返回数据其实是特别容易的，只要在返回时带第二个参数就可以了。
Navigator.pop(context,'xxxx'); //xxx就是返回的参数
静态资源和项目图片的处理
如果想配置项目资源文件，就需要使用pubspec.yaml文件，需要把资源文件在这里声明。
比如在项目根目录下新建了一个images文件夹，文件夹下面放了一个图片，图片的名称叫做blogtouxiang.jpg，那我们在pubspec.yaml文件里就要写如下代码进行声明。
assets:
- images/blogtouxiang.jpg
使用项目图片资源
有了声明后，我们就可以直接在项目中引用这个文件了。这里使用最简单的代码结构，只用了一张图片。代码如下:
import 'package:flutter/material.dart';
void main()=>runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
child: Image.asset('images/blogtouxiang.jpg'),
);
}
}
