Flutter 返回数据至上一个页面

这个其实和之前写的传送数据至新页面是相对应的，有数据向下传送，那么就一定会有数据向上返回。

在看了官方文档后，其实用到了异步操作async 以及await关键词，我刚开始也不太懂，因为没学过，所以这里大家如果有不懂的可以去大概了解下这两个关键词的意思，主要就是异步延迟操作，也就是说我先执行可以马上执行完毕的操作，复杂的或者需要一定时间操作的先缓一缓，等到其他一些命令执行完成后再执行。

项目说明：还是延用之前汽车那个例子，点击某个汽车信息跳转到汽车详情页面后，点击返回以后，将返回的汽车名字作为提示信息在页面底部弹出。

下面撸码：

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
 
void main() => runApp(new MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new MaterialApp(
      title: 'Navigator Demon',
      home: new CarItemList(
        title: '汽车列表',
      ),
    );
  }
}
 
/*
汽车类，拥有两个属性，名字和颜色
 */
class Car {
  const Car(this.name, this.color);
  final name;
  final color;
}
 
/*
这是首页面，展示了一个50条汽车信息滚动列表，每个汽车信息行展示了一个汽车的名字和汽车的颜色
 */
class CarItemList extends StatelessWidget {
  CarItemList({Key key, this.title}) : super(key: key);
  final title;
 
  List<Car> cars =
      new List<Car>.generate(50, (i) => new Car('汽车 $i', '颜色是 $i'));
  //这是一个带有异步延迟操作的方法，首先是进行路由导航至下一个页面，然后延迟操作将返回的值car赋予result，这个result是一个将来值。
  enterCarDetail(BuildContext context,int index) async{
    final result = await Navigator.push(context,
        new MaterialPageRoute(builder: (context) {
          return new CarDetails(car: cars[index],);
    }));
 
    //这是在页面底部显示一个弹出提示
    Scaffold.of(context).showSnackBar(new SnackBar(content: new Text('${result.name}'+'      '+'${result.color}')));
  }
 
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(title),
      ),
      body: new Center(
        child: new ListView.builder(
            itemCount: cars.length,
            itemBuilder: (context, index) {
              return new ListTile(
                title: new Text(cars[index].name),
                //点击后，通过路由导航至汽车详情页面，同时把点击的那个汽车信息传到下一个页面
                onTap: () {
                  enterCarDetail(context, index);
                  });
                },
      ),
      )
    );
  }
}
 
/*
这是汽车详细信息页面，通过首页点击某个汽车名字从而进入到这个汽车详情页面
并将在前一个页面点击某个汽车后，将汽车信息带入到本页面从而展示
 */
class CarDetails extends StatelessWidget {
  CarDetails({Key key, this.car}) : super(key: key);
  final Car car;
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('汽车详情'),
      ),
      body: new Container(
        alignment: Alignment.center,
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new Card(
                child: new Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                  new Text(
                    '汽车名称：',
                    style: new TextStyle(fontSize: 20.0),
                  ),
                  new Text(
                    car.name,
                    style: new TextStyle(fontSize: 20.0),
                  )
                ])),
            new Card(
                child: new Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                  new Text(
                    '汽车颜色：',
                    style: new TextStyle(fontSize: 20.0),
                  ),
                  new Text(
                    car.color,
                    style: new TextStyle(fontSize: 20.0),
                  )
                ])),
            new RaisedButton(
                child: new Text('返回',style: new TextStyle(fontSize: 20.0),),
                //返回按钮，点击以后将路由退出路由栈，同时将car返回给上一个页面。
                onPressed: (){
                  Navigator.pop(context,car);
                })
          ],
        ),
      ),
    );
  }
}

运行效果如下：点击返回按钮，回到前一个页面，同时在下面弹出显示返回的汽车数据信息。

3.png

4.png