在 Flutter 中，有一套自己的页面传参机制。
我们仍然需要通过 Navigator 来实现页面间的传参。
1.如何进行页面传参
Flutter 中页面传参的思路是，为页面 Widget 的构造函数中增加参数，通过构造函数来给页面传参。
class HomePage extends StatelessWidget {
final PageData data;
// 带所需参数的构造函数
const HomePage({Key key, this.data}) : super(key: key);
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text('Home Page'),
),
body: Container(
color: Colors.white,
child: Center(
child: Text(data != null ? data.data : 'There is no data!'),
),
),
);
}
}
来看看跳转时如何给他传参数：
var data = PageData('Come form SplashPage!');
// 使用 Navigator 跳转页面
Navigator.push(context, MaterialPageRoute(
builder: (context) => HomePage(
data: data,
)));
2.如何接收页面回参
想要页面能够接收回，在跳转的时候，需要在跳转的时候进行处理：
// 需要使用异步的方式跳转，然后等待结果返回
void jumpToHome(BuildContext context) async {
var data = PageData('Come form SplashPage!');
// 使用 Navigator 跳转页面
// 使用 await 等待结果返回
var result = await Navigator.push( context, MaterialPageRoute(
builder: (context) => HomePage(
data: data,
)));
if (result != null) {
// 通知状态变化，更新 ui
setState(() {
text = result;
});
}
}
其实，接收页面回参的方式也很简单，就是需要在一个异步函数中异步跳转，然后通过 await 等待结果返回。
当然，由于 Navigator.push() 返回的是一个 Future，你也可以在 then() 函数中接收返回参数处理。
Navigator.push( context, MaterialPageRoute(
builder: (context) => HomePage(
data: data,
))).then((result){ //... });
在另一个页面中，返回结果给上一个页面：
Navigator.pop(context, result);
就是在 pop 的时候带上要返回的信息就可以了。
3.一个完整的传参、回参例子
创建第一个页面，splash_page.dart:
class SplashPage extends StatefulWidget {
@override
State<StatefulWidget> createState() {
// TODO: implement createState
return _SplashPage();
}
}
class _SplashPage extends State<SplashPage> {
final splashUrl =
'https://raw.githubusercontent.com/chenBingX/img/master/其它/u=343452579,826911251&fm=26&gp=0.jpg';
var text = 'Next';
@override
Widget build(BuildContext context) {
// TODO: implement build
return Stack(
alignment: Alignment(0, 0.75),
children: <Widget>[
Container(
decoration: BoxDecoration(
image: DecorationImage(image: NetworkImage(splashUrl))),
),
GestureDetector(
// 设置点击事件
onTap: () {
jumpToHome(context);
},
child: Container(
padding: EdgeInsets.only(left: 12, top: 6, right: 12, bottom: 6),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(6)),
gradient: LinearGradient(
colors: <Color>[Colors.red, Colors.green, Colors.blue],
),
),
child: Text(
text,
style: TextStyle(color: Colors.white, fontSize: 16),
)),
),
],
);
}
void jumpToHome(BuildContext context) async {
var data = PageData('Come form SplashPage!');
// 使用 Navigator 跳转页面
var result = await Navigator.push(
context,
MaterialPageRoute(
builder: (context) => HomePage(
data: data,
)));
if (result != null) {
setState(() {
text = result;
});
}
}
}
创建第二个页面，home_page.dart :
class HomePage extends StatelessWidget {
final PageData data;
// 带所需参数的构造函数
const HomePage({Key key, this.data}) : super(key: key);
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text('Home Page'),
),
body: GestureDetector(
onTap: () {
Navigator.pop(context, 'HomePage popped!');
},
child: Container(
color: Colors.white,
child: Center(
child: Text(data != null ? data.data : 'There is no data!'),
),
),
));
}
}
运行起来，main.dart ：
void main() => runApp(MaterialApp(
title: 'Flutter',
home: SplashPage(),
));
运行效果：
