页面间导航
跳转到另一个页面及返回
首先，定义主页面。
编写第一个界面FirstScreen。
界面上有一个button，点击会跳转到第二个界面。跳转后第一个页面不会消失，相当于把第二个页面push到页面栈中。
push时需传递两个参数，第一个参数是上下文参数，即build方法中传的参数context；第二个参数是要做的事情的方法，此处为flutter提供的一个路由组件MaterialPageRoute。路由组件MaterialPageRoute的builder属性里面放一个函数，即要做的事情：把上下文context传递过来作为参数，跳转到另一个界面SecondScreen。
编写跳转到的界面SecondSrceen。
该页面中有一个按钮，点击返回上一个页面。使用从页面栈中pop的方法返回上一个页面。
运行结果：
点击“查看详情”可跳转至第二个页面。点击“返回”或返回箭头可返回第一个页面。
页面间传参
最终效果：
点击“商品1”，跳转至详情页面。页面传递参数体现在第二页面的AppBar和body中。
首先抽象出商品信息类。
class Product{
final String title; // 商品名称
final String description; // 商品描述
Product(this.title,this.description); //构造函数
}
接着定义主界面。界面中是一个ProductList组件，之后进行定义。
void main(){
runApp(MaterialApp(
title: '导航传参',
home: ProductList( // ProductList组件在后面定义
// 第一个参数是要生成多少个数据
// 第二个参数使用匿名函数构造这20个数据
products:List.generate(
20,
(i)=>Product('商品$i','这是一个商品详情，编号为$i')
)
)
));
}
接下来定义组件ProductList。在点击事件onTap内定义事件函数体。跳转到的新页面组件ProductDetail在后面定义。根据后续定义的该组件的构造函数，需传参数product，在此处传递的参数的值为products[index]。
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)=>ProductDetail(product:products[index]))
);
},
);
}
)
);
}
}
最后定义跳转到的详情页面ProductDetail。
class ProductDetail extends StatelessWidget {
final Product product; //接收参数
ProductDetail({Key key, @required this.product}):super(key:key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('${product.title}'),),
body:Center(child: Text('${product.description}'))
);
}
}
页面返回时传参
最终效果：
第一个页面中有一个“搜索”按钮，点击按钮跳转到第二个页面。
点击“这是搜索结果1”将返回第一个页面，并在页面底部以SnackBar的形式传递相关参数；点击“这是搜索结果2”也将返回第一个页面，并在页面底部以SnackBar的形式传递相关参数。
先定义主函数。
void main() {
runApp(MaterialApp(title: '页面跳转返回数据', home: FirstPage()));
}
定义FirstPage。页面中有一个组件RouteButton，在后面进行定义。
class FirstPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('这个图片是什么')),
body: Center(
child: RouteButton(),
));
}
}
定义组件RouteButton。组件中含有的是一个RaisedButton，在点击事件中是一个自定义的静态响应事件_navigateToSearch(BuildContext context)。该事件是一个异步事件，即需要获取到数据后才进行下一步，因此需使用async和await。使用SnackBar在第一个页面的底部显示。
class RouteButton extends StatelessWidget {
@override
Widget build(BuildContext context) {
return RaisedButton(
onPressed: () {
_navigateToSearch(context);
}, //响应事件，自定义一个静态方法
child: Text('搜索'),
);
}
_navigateToSearch(BuildContext context) async {
//异步方法
//等待参数传递过来，使用await
final result = await Navigator.push(
context,
MaterialPageRoute(builder: (context) => SearchPage()),
);
Scaffold.of(context).showSnackBar(SnackBar(content: Text('$result')));
}
}
定义跳转到的页面SearchPage。使用Navigator.pop(context, route)返回上一个页面并传递参数。
class SearchPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('搜索结果'),
),
body: Center(
child: Column(
children: <Widget>[
RaisedButton(
child: Text('这是搜索结果1'),
onPressed: () {
Navigator.pop(context, '这是一只兔子的概率是85%');
},
),
RaisedButton(
child: Text('这是搜索结果2'),
onPressed: () {
Navigator.pop(context, '这是一只狗的概率是15%');
},
),
],
),
),
);
}
}
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
