18-flutter的Future和FutureBuilder

Future

表示接卸来某个时间的值或者错误，借助Future可以在flutter 总实现异步操作。

其本事是dart：async 包中的一个类，使用它的时候需要导入dart:async 包，Future 有两种状态。

pending 执行中
completed 执行结束，分为两种情况，要么成功并要么失败

1 异步操作

  test() async{int result = await Future.delayed(Duration(milliseconds: 2000),(){return Future.value(123);});print('t3:' + DateTime.now().toString());print(result);}main(){print('t1:' + DateTime.now().toString());test();print('t2:' + DateTime.now().toString());}
// 打印结果如下 // flutter: t1:2019-08-25 15:32:32.880966
// flutter: t2:2019-08-25 15:32:33.054501
// flutter: t3:2019-08-25 15:32:35.059487
// flutter: 123

2 whenComplete

在future 结束的时候做一些事情

      var random = Random();Future.delayed(Duration(seconds: 3),(){if (random.nextBool()){return 100;}else{throw 'ok';}}).then(print).catchError(print).whenComplete((){print('done');});

3 timeout

完成一个异步的操作需要很长时间，所以设置一个超市时间

  main(){new Future.delayed(new Duration(seconds: 3),(){return 1;}).timeout(new Duration(seconds: 2)).then(print).catchError(print);}// TimeoutException after 0:00:02.000000: Future not completed

4 FutureBuilder

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

构造方法

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

future : Future对象表示此构建器当前连接的异步计算；
initialData: 表示一个非空的Future完成前的初始化数据；
builder: AsyncWidgetBuilder类型的回到函数，是一个基于异步交互构建widget的函数
- builder 函数接受两个参数BuildContext context与 AsyncSnapshot<T> snapshot，它返回一个widget。AsyncSnapshot包含异步计算的信息，它具有以下属性：
- connectionState - 枚举ConnectionState的值，表示与异步计算的连接状态，ConnectionState有四个值：none，waiting，active和done;
- data - 异步计算接收的最新数据；
- error - 异步计算接收的最新错误对象
- AsyncSnapshot还具有hasData和hasError属性，以分别检查它是否包含非空数据值或错误值。

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;void main() => runApp(new MyApp());class MyApp extends StatefulWidget {@overrideState<StatefulWidget> createState() => _MyAppState();
}class _MyAppState extends State<MyApp> {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(); //fix 中文乱码var result = json.decode(utf8decoder.convert(response.bodyBytes));return CommonModel.fromJson(result);}@overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(appBar: AppBar(title: Text('Future与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'],);}
}

18-flutter的Future和FutureBuilder相关推荐

【Flutter】Future 与 FutureBuilder 异步编程代码示例 ( FutureBuilder 构造函数设置 | 处理 Flutter 中文乱码 | 完整代码示例 )
文章目录一.FutureBuilder 简介二.处理 Flutter 中的中文乱码三.完整代码示例四.相关资源一.FutureBuilder 简介 FutureBuilder 本质是组件 : ...
Flutter异步加载FutureBuilder重绘解决方案
题记 -- 执剑天涯,从你的点滴积累开始,所及之处,必精益求精,即是折腾每一天. ** 你可能需要 CSDN 网易云课堂教程掘金 EDU学院教程知乎 Flutter系列文章通过FutureBui ...
Future 与 FutureBuilder
什么是Future? Future表示在接下来的某个时间的值或错误,借助Future我们可以在Flutter实现异步操作. 它类似于ES6中的Promise,提供then和catchError的链式调 ...
【Flutter】Future 异步编程 ( 简介 | then 方法 | 异常捕获 | async、await 关键字 | whenComplete 方法 | timeout 方法 )
文章目录一.Future 简介二.Future.then 使用三.Future 异常捕获四.Dart 练习网站五.async.await 关键字六.whenComplete 方法七.ti ...
Flutter延时任务、Flutter通过Future与Timer实现延时任务
题记 -- 执剑天涯,从你的点滴积累开始,所及之处,必精益求精,即是折腾每一天. ** 你可能需要 CSDN 网易云课堂教程掘金 EDU学院教程知乎 Flutter系列文章本文是异步编程的延时策 ...
Flutter进阶篇（4）-- Flutter的Future异步详解一、认识Future二、创建多个Future的执行步骤三、then函数嵌套使用的执行步骤四、综合示例五、我们来看看Future的源码
https://cloud.tencent.com/developer/article/1375846 本文首发在公众号Flutter那些事,欢迎大家多多关注. 说明:本文中的所有函数的引用在main ...
Flutter type ‘Future＜bool＞‘ is not a subtype of type ‘bool‘ in type cast
这个问题是我在使用flutter shared_preferences的时候,自己默认写了几个存储和读取的字段函数,然后出错了问题在! 我使用的时候非常耿直如图 getUserNameInput函 ...
flutter中Future.delayed延迟任务
使用了FlutterEasyLoading的showSuccess提示处理结果后,使用Future.delayed延迟跳转 void _showTipsAndJump() {EasyLoading.s ...
flutter图片点击跳转_Flutter系列之Platform Channel使用详解
PS:逐渐体会到关键少数原则的重要性,接下来就是付诸实践了,另外科创50ETF明天开始限额销售,可以适当关注或入手一点. 前面几篇文章介绍了 Navigator 组件.Flex 布局.图片加载.Wid ...