flutter练习 - Future与FutureBuilder实例

Future 异步操作

• then ：异步操作逻辑
• whenComplete ：异步完成时回调
• catchError ：捕获异常或异步出错时的回调
• timeout ：设置超时时间

Future的then的原型

Future<R> then<R>(FutureOr<R> onValue(T value),{Function onError});

• onValue ：成功的结果回调
• onError ：可选 ，执行出现异常

import 'dart:async';
Future<String> testFuture() {
//  throw Error();
  return Future.value("success");
//  return Future.error("error");
}
//注意： 如果 catchError 与 onError 同时存在时，则只会调用 onError
void main() {
  testFuture().then((s) {
    print("then : " + s);
  }, onError: (e) {
    print("onError : " + e);
  }).whenComplete(() {
    print("whenComplete");
  }).catchError((e) {
    print("catchError : " + e);
  });
}

结合 async， await

import 'dart:async';

test() async {
  String result = await Future.delayed(Duration(milliseconds: 2000), () {
    return Future.value("success");
  });
  print("t3 : " + DateTime.now().toString());
  print("result : " + result);
}

main() {
  test();
  print("t1 : " + DateTime.now().toString());
  print("t2 : " + DateTime.now().toString());
}

future.timeout 设置超时时间

import 'dart:async';

void main() {
  Future.delayed(Duration(seconds: 2), () {
    return "success";
  }).timeout(Duration(seconds: 1)).then((s) {
    print("then : $s");
  }).whenComplete(() {
    print("whenComplete");
  }).catchError((e) {
    print("catchError : $e");
  });
}

代码运行会出现如下结果：

whenComplete
catchError : TimeoutException after 0:00:01.000000: Future not completed

FutureBuilder ---- 网络请求，数据库读取 更新 界面

• FutureBuildere是一个将异步操作和异步UI更新结合在一起的类，通过它我们可以将网络请求，数据库读取等的结果更新到页面上
• FutureBuilder的构造方法

FutureBuilder({Key key,Future<T> future,T initialData,@required AsyncWidgetBuilder<T>builder});

• future ：Future对象表示此构造器当前连接的异步计算
• initialData ：表示一个非空的Future完成前的初始化数据
• builder ：AsyncWidgetBuilder类型返回的函数，是一个基于异步交互构建widget的函数
  builder:
  BuildContext context
  AsyncSnapshot snapshot
  connectionState 表示与异步计算的连接状态
  data - 异步计算接收的最新数据
  error - 异步计算接收的最新错误对象；

ConnectionState ：与异步计算的连接状态

• none ：future还未执行的快照状态
• waiting ：连接到一个异步操作，并且等待交互，一般在这种状态的时候，我们可以显示加载框
• active ：连接到一个活跃的操作，比如stream流，会不断地返回值，并还没有结束，一般也是可以显示加载框
• done：异步操作执行结束，一般在这里可以去拿取异步操作执行的结果，并显示相应的布局

ConnectionState	当前没有连接到任何的异步任务
ConnectionState.none	当前没有连接到任何的异步任务
ConnectionState.waiting	连接到异步任务并等待进行交互
ConnectionState.active	连接到异步任务并开始交互
ConnectionState.done	异步任务中止

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

void main() => runApp(MyApp1());

class MyApp1 extends StatefulWidget {
  @override
  _MyApp1State createState() => _MyApp1State();
}

class _MyApp1State extends State<MyApp1> {
  String showResult = '';

  Future<CommonModel> fetchPost() async {
    final response = await http
        .get('http://www.devio.org/io/flutter_app/json/test_common_model.json');
    Utf8Decoder utf8decoder = Utf8Decoder(); //中文乱码
//    final result=json.decode(response.body);
    final result = json.decode(utf8decoder.convert(response.bodyBytes));
    return CommonModel.fromJson(result);
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('FutureBuilder')),
        body: FutureBuilder<CommonModel>(
          future: fetchPost(),
          builder: (BuildContext context, AsyncSnapshot<CommonModel> snapshot) {
            switch (snapshot.connectionState) {
              case ConnectionState.none:
                return new Text('Input a URL to start');
              case ConnectionState.waiting:
                return new Center(child: new CircularProgressIndicator());
              case ConnectionState.active:
                return new Text('');
              case ConnectionState.done:
                if (snapshot.hasError) {
                  return new Text(
                    '${snapshot.error}',
                    style: TextStyle(color: Colors.red),
                  );
                } else {
                  return new Column(children: <Widget>[
                    Text('icon:${snapshot.data.icon}'),
                    Text('statusBarColor:${snapshot.data.statusBarColor}'),
                    Text('title:${snapshot.data.title}'),
                    Text('url:${snapshot.data.url}')
                  ]);
                }
            }
          },
        ),
      ),
    );
  }
}

class CommonModel {
  final String icon;
  final String title;
  final String url;
  final String statusBarColor;
  final bool hideAppBar;

  CommonModel(
      {this.icon, this.title, this.url, this.statusBarColor, this.hideAppBar});

  factory CommonModel.fromJson(Map<String, dynamic> json) {
    return CommonModel(
      icon: json['icon'],
      title: json['title'],
      url: json['url'],
      statusBarColor: json['statusBarColor'],
      hideAppBar: json['hideAppBar'],
    );
  }
}