P19. Flutter 页面跳转并返回数据

当我们返回页面时返回结果到上一个页面（也就是父页面）。这样的场景经常用于，我们去子页面选择了一项选项，然后把选择的结果返回给父级页面。

异步请求和等待

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 就是返回的参数

找美女 Demo 代码

本文的代码其实挺多的，我把所有代码都放到下面，你可以在看完文章后，照着练习。

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(),
      )
    );
  }
}

//跳转的 Button
class RouteButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      onPressed:(){
          _navigateToXiaoJieJie(context);
      },
      child: Text('去找美女'),
    );
  }

  _navigateToXiaoJieJie(BuildContext context) async{ //async 是启用异步方法

    final result = await Navigator.push(//等待
      context, 
      MaterialPageRoute(builder: (context)=> XiaoJieJie())
      );

      Scaffold.of(context).showSnackBar(SnackBar(content:Text('$result')));
  }
}

class XiaoJieJie extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar:AppBar(
        title:Text('我是美女')
      ),
      body:Center(
        child:Column(
          children: <Widget>[
            RaisedButton(
              child: Text('大长腿美女'),
              onPressed: (){
                Navigator.pop(context,'大长腿:13500987654');
              },
            ) ,
            RaisedButton(
              child: Text('小蛮腰美女'),
              onPressed: (){
                Navigator.pop(context,'大长腿:1511009999');
              },
            ) ,
          ],
        ) 
      ) ,
    );
  }
}

效果如下：

以上关于P19. Flutter 页面跳转并返回数据的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。