目录

• 异步操作Future
• Async/await
• Dio引用，Get请求和POST请求的使用
• 数据请求和动态组件协作
• 组件 - SingleChildScrollView
• 组件 - ListBody
• 组件 - TextField

---

1. 异步操作Future

Future与JavaScript中的Promise非常相似，表示一个异步操作的成功或失败。

• Future.then 接收异步结果

• Future.delayed 创建一个延时任务

• Future.catchError 异步任务发生错误，在catchError中捕获错误，
  我们也可以用“then方法里的可选参数onError”来捕获异常。

// catchError中捕获错误
Future.delayed(new Duration(seconds: 2),(){
   //return "hi world!";
   throw AssertionError("Error");  
}).then((data){
   //执行成功会走到这里  
   print("success");
}).catchError((e){
   //执行失败会走到这里  
   print(e);
});

// onError中捕获错误
Future.delayed(new Duration(seconds: 2), () {
    //return "hi world!";
    throw AssertionError("Error");
}).then((data) {
    print("success");
}, onError: (e) {
    print(e);
});

• Future.whenComplete 无论异步任务执行成功或失败都需要做一些事的场景，比如在网络请求前弹出加载对话框，在请求结束后关闭对话框。代码如下：

Future.delayed(new Duration(seconds: 2),(){
   //return "hi world!";
   throw AssertionError("Error");
}).then((data){
   //执行成功会走到这里 
   print(data);
}).catchError((e){
   //执行失败会走到这里   
   print(e);
}).whenComplete((){
   //无论成功或失败都会走到这里
});

• Future.wait 等待多个异步任务都执行结束后才进行一些操作。
  下面，我们通过模拟Future.delayed 来模拟两个数据获取的异步任务，等两个异步任务都执行成功时，将两个异步任务的结果拼接打印出来，代码如下

Future.wait([
  // 2秒后返回结果  
  Future.delayed(new Duration(seconds: 2), () {
    return "hello";
  }),
  // 4秒后返回结果  
  Future.delayed(new Duration(seconds: 4), () {
    return " world";
  })
]).then((results){
  print(results[0]+results[1]);
}).catchError((e){
  print(e);
});

---

2.Async/await

Dart中的async/await 和JavaScript中的async/await功能和用法是一模一样的。

• async用来表示函数是异步的，定义的函数会返回一个Future对象，可以使用then方法添加回调函数。
• await 后面是一个Future，表示等待该异步任务完成，异步完成后才会往下走；await必须出现在 async 函数内部。

---

3. Dio引用和简单的Get 请求

• 在配置文件pubspec.yaml中添加第三方库，dio(https://github.com/flutterchina/dio)

dependencies
    dio: 2.1.x 

• 在页面文件中引用第三方库

  import 'package:dio/dio.dart';

---

4. 组件-SingleChildScrollView

当组件内容超过当前显示视口(ViewPort)时，如果没有特殊处理，Flutter则会提示Overflow错误。

属性包括:

• scrollDirection: Axis.vertical | Axis.horizontal,滚动方向，默认是垂直方向
• reverse: false, reverse为true时，那么滑动方向开始在“头”还是“尾”。
• padding: ...,
• controller: ...,
• child: ...,

---

5. 组件-ListBody

ListBody的作用是按给定的轴方向，按照顺序排列子节点， 一般都会配合ListView或者Column等控件使用

属性包括:

• mainAxis: 主轴方向
• reverse: 列表主体是否将子控件定位在阅读方向
• children: 子控件们