Flutter：学会在页面间传递参数 |
您所在的位置：网站首页 › navigator传参 › Flutter：学会在页面间传递参数 |
Flutter：学会在页面间传递参数
|
目录传送门：《Flutter快速上手指南》先导篇 在 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 createState() { // TODO: implement createState return _SplashPage(); } } class _SplashPage extends State { 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: [ 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: [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(), ));运行效果：
目录传送门：《Flutter快速上手指南》先导篇 如何找到我？传送门：CoorChice 的主页 传送门：CoorChice 的 Github |
【本文地址】
今日新闻 |
推荐新闻 |