导航关系到页面之间到跳转问题,一般有几种场景:一般情况下的导航,也就是说页面之间跳转不需要带参数,还有就是页面直接跳转需要带参数。
一、不带参数的页面跳转和返回
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
title: '导航示例',
home: new FirstScreen(),
));
}
//第一个页面
class FirstScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold (
appBar: AppBar(title: Text('导航页面'),),
body: Center( //让按钮居中显示的框架
child: RaisedButton(//凸起的按钮
child: Text('checkout detail'), //按钮的文字
color: Colors.red,//按钮的背景色
child: Text('checkout detail'), //按钮的文字
textColor: Colors.orange, //文字的颜色
highlightColor: Colors.green,//高亮(被点击)时的颜色
focusColor: Colors.blue,
hoverColor: Colors.purple,
elevation: 20.0, //阴影
onPressed: (){//点击按钮的事件
Navigator.push(context, MaterialPageRoute( //跳转界面到SecondScreen
builder:(context)=> new SecondScreen()
));
},
),
),
);
}
}
//第二个页面
class SecondScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('detail page'),),
body: Center(
child: RaisedButton(
child: Text('back'),
onPressed: (){
Navigator.pop(context); //返回到上一级界面
},
),
),
);
}
}
其中需要注意的是RaisedButton按钮组件,它继承自MaterialButton,它有两个最基本的属性:
- child:可以放入容器,图标,文字。让你构建多彩的按钮。
- onPressed:点击事件的相应,一般会调用
Navigator
组件。
当然它还有长按点击事件:onLongPress点击事件。
Navigator.push 和 Navigator.pop
-
Navigator.push
:是跳转到下一个页面,它要接受两个参数一个是上下文context
,另一个是要跳转的函数。 -
Navigator.pop
:是返回到上一个页面,使用时传递一个context(上下文)参数,使用时要注意的是,你必须是有上级页面的,也就是说上级页面使用了Navigator.push
。
运行结果:简书中没法添加录制视频,只能截图显示显示效果
二、导航参数的传递
下列代码功能是创建一个商品列表页,点击商品跳转到商品详情页
import 'package:flutter/material.dart';
//构造一个Product对象
class Product {
final String title;//商品名称
final String description;//商品描述
Product(this.title, this.description);//构造函数
}
void main(){
runApp(MaterialApp(
title: '导航的接收和传递',
home: ProductList(
//初始化并赋值products数组
products: List.generate(20, (i)=>Product('商品$i','这是一个商品详情'))
),
));
}
//创建商品列表页
class ProductList extends StatelessWidget {
final List<Product> products;
ProductList({@required this.products}):super();
@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])
)
);
},
);
},
),
);
}
}
//创建商品详情页
class ProductDetail extends StatelessWidget {
final Product product;
ProductDetail({@required this.product}):super(); //构造函数用来接收参数
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('${product.title}'),), //把传递过来的product中的title作为标题
body: Center(
child: Text('${product.description}'),
),
);
}
}
列表页
商品详情页
三、导航参数的接收
下列示例是点击按钮进入详情页,然后点击详情页的按钮返回到上一级界面并返回值显示。
这段代码中使用了async是异步加载,Dart规定async标记的函数,只能由await来调用。
使用了SnackBar这个组件来显示返回值。
import 'package:flutter/material.dart';
void main(){
runApp(MaterialApp(
title: '页面跳转返回数据',
home: FirstPage(),
));
}
class FirstPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("商品")),
body: Center(
child: RouteButton(),
)
);
}
}
class RouteButton extends StatelessWidget {
@override
Widget build(BuildContext context) {
return RaisedButton(
onPressed: (){
_navigateToDetail(context);
},
child: Text('点击进入商品列表页'),
);
}
//下划线表示是内部方法
//async是异步加载,Dart规定async标记的函数,只能由await来调用
_navigateToDetail(BuildContext context) async{
final result = await Navigator.push( //接收DetailPage传回来的值
context,
MaterialPageRoute(builder: (context)=>DetailPage())
);
//SnackBar是一个组件可以显示内容,用于显示返回值result
Scaffold.of(context).showSnackBar(SnackBar(content: Text('${result}')));
}
//
}
class DetailPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('可供选择的商品')),
body: Center(
child: Column(
children: <Widget>[
RaisedButton(
child: Text('This is a Mac'),
onPressed: (){
Navigator.pop(context,'Mac'); //把Mac值返回给上一个页面
},
),
RaisedButton(
child: Text('This is a phone'),
onPressed: (){
Navigator.pop(context,'phone');
},
),
],
),
),
);
}
}
网友评论