Flutter的菜鸟教程十五:跳转页面后携带数据返回

3.跳转到下一个页面并携带数据返回
本文我们实现一个在京南商城从首页跳转到购物车并选择你要买啥返回通过SnackBar来显示跳转携带返回的数据….厉害了这么长,hia hia hia(一种笑声很难模仿)
这个功能类似于Android的startActivityForResult

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:meta/meta.dart';

/**
 * 跳转到新页面并携带数据
 */
void main() {
  runApp(new MaterialApp(
    title: "chen",
    home: new HomeScreen(),
  ));
}

/**
 * 主页
 */
class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(
          title: new Text("京南商城"),
        ),
        body: new Center(child: new SelectionButton()));
  }
}

/**
 * 添加一个打开页面的按钮
 */
class SelectionButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //这个Button是第一次用吗？ 凸起效果的按钮
    return new RaisedButton(
      //onPressed如果传null 会禁用按钮
      onPressed: () {
        print("----A------");
        _navigatorAndDisplaySelection(context);
        print("----B------");
      },
      child: new IconButton(
        icon: const Icon(
          Icons.shopping_cart,
          color: Colors.red,
        ),
      ),
    );
  }

  /**
   *第一种异步方式 async await
   * 启动并等待返回结果
   */
  _navigatorAndDisplaySelection1(BuildContext context) async {
    print("----c------");
    var result = await Navigator.push(context,
        new MaterialPageRoute(builder: (context) => new SelectionScreen()));
    print("----d------");
    Scaffold
        .of(context)
        .showSnackBar(new SnackBar(content: new Text("$result")));
  }
}

/**
 *  第二种异步方式 Future API
 * 启动后不等待返回结果 但是返回后有回调函数 相当于注册了一个接收者
 */
_navigatorAndDisplaySelection(BuildContext context) {
  print("----c------");
  Navigator
      .push(context,
          new MaterialPageRoute(builder: (context) => new SelectionScreen()))
      .then((result) {
    print("----E------");
    Scaffold
        .of(context)
        .showSnackBar(new SnackBar(content: new Text("$result")));
  }).catchError((error) {
    print("$error");
  });
  print("----d------");
}

/**
 * 在购物车页面中显示两个商品
 */
class SelectionScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("购物车"),
      ),
      body: new Center(
        //创建一个垂直的布局
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            _getPadding(context, "三级头"),
            _getPadding(context, "三级甲"),
          ],
        ),
      ),
    );
  }

  Widget _getPadding(BuildContext context, String text) {
    return new Padding(
      padding: const EdgeInsets.all(8.0),
      child: new RaisedButton(
        onPressed: () {
          Navigator.pop(context, text);
        },
        child: new Text(text),
      ),
    );
  }
}

运行:
这里写图片描述

点击购物车按钮后跳转到购物车买新衣服啦

这里写图片描述

买了一件新的衣服回家啦,我们在页面底部通过SnackBar来弹出返回的数据

这里写图片描述

本文有些新的内容需要介绍
首先我们应该科普一下基础知识
Dart是单线程的,如果执行耗时任务会使程序阻塞,而Future对象是用来表示异步操作,Dart1.9版本之后才添加的async/await

async
文中出现的async你知道什么作用吗？
Flutter支持异步编程,使用async,需要声明import ‘dart:async’;
在函数上声明后,表明该函数是延迟加载的,有开发基础的应该很容易理解这个,不能影响咱们Ui交互是吧
await
程序暂停执行,等待返回的Future完成,
如果有多个await,那么他们是顺序执行的,比如
await xx1();
await xx2();
await xx3();
await xx4();
…
Future
代码中提供了两种方式来实现异步,他和async/await实现的功能相同,他在编写异步代码时使用then注册了回调,当Future完成时此回调会被触发,
还提供了一个catchError方法,此方法回调时机是Future以错误完成才会回调该函数

最好看下两种方式的执行顺序日志，这更方便你了解他们的工作机制

async/await方式
这里写图片描述
Future方式

这两种方式在代码中都提供了函数..在以后将经常使用,我说的很明白吧很容易理解吧?还辅以日志
个人觉得不是很难理解,和Android中都是解决相同的问题,只是换了一种方式,其思想还是一致的,不能影响用户操作ui

Flutter的菜鸟教程十五:跳转页面后携带数据返回

猜你喜欢