Flutter开发(二十一)：Flutter中Future与FutureBuilder

1.什么是 Future 

2.Future 常见用法

3.什么是 FutureBuilder

4.FutureBuilder 常见用法

1.什么是 Future 

future 表示接下来的某个时间的值或错误，用 future 可以在 Flutter 实现异步操作。

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

pending        执行中

completed        执行结束，有可能成功或失败

2.Future 常见用法

使用 Future.then 获取 future 的值与捕获异常。

结合 async，await

future.whenComplete

future.timeout

使用 Future.then 获取 future 的值与捕获异常：

import 'dart:async';

Future<String> textFuture(){
  return Future.value('sucess');
}
void main() {
  //如果catchError和onError同时存在，只会调用onError
  textFuture().then((s){
    print(s);
  },onError: (e){
    print('onError:');
    print(e);
  }).catchError((e){
    print('onError:');
    print(e);
  });
}

结合 async，await：会先打印1，2，3，111。

import 'dart:async';

test() async{
  //等待1秒执行。
  int reselt = await Future.delayed(Duration(milliseconds: 1000),(){
    return Future.value(111);
  });
  print('3');
  print(reselt);
}
void main() {
  print('1');
  test();
  print('2');
}

future.whenComplete

future 结束做一些事情。then().catchError() 模式类似于 try-catch，try-catch 中有个 finally 代码块，future.whenComplete 就是 Future 的 finally 。

import 'dart:async';

void main() {
  var random = Random();
  Future.delayed(Duration(seconds: 2),(){
    if(random.nextBool()){
      return 100;
    }else{
      throw 'boom!';
    }
  }).then(print).catchError(print).whenComplete((){
    print('Future执行结束');
  });
}

future.timeout

设置超时时间，如网络请求。

import 'dart:async';

void main() {
  Future.delayed(Duration(seconds: 3),(){
      return 100;
  }).timeout(new Duration(seconds: 2)).then(print).catchError(print);
}

结果会超时：

 TimeoutException after 0:00:02.000000: Future not completed

3.什么是 FutureBuilder

它是将异步操作和异步UI更新结合在一起的类，通过它可以进行网络请求然后针对结果更新UI。

里面有三个构造函数：

future：网络请求

initialData：非空的 Future 完成前的初始化数据。

builder：回调函数，处理完成成功/失败更新UI处理结果。

4.FutureBuilder 常见用法

网络请求完成之后更新UI，详细代码：

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyApp> {
  late String result="";

  Future<CommonModel> fetchPost() async {
    final response = await http
        .get('http://www.devio.org/io/flutter_app/json/test_common_model.json');
    final result = json.decode(response.body);
    return new CommonModel.fromJson(result);
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(

          appBar: AppBar(
            title: Text('Title'),
          ),
          //Stack相对布局
          body: FutureBuilder<CommonModel>(
            //开始网络请求
              future: fetchPost(),
              builder:
                  (BuildContext context,
                  AsyncSnapshot<CommonModel> snapshot) {
                //判断连接状态
                switch (snapshot.connectionState){
                  case ConnectionState.none:
                    print('没有状态');
                    return new Text('没有状态');
                  case ConnectionState.waiting:
                    //加载中
                    print('加载中');
                    return new Center(child: new CircularProgressIndicator(),);
                  case ConnectionState.done:
                    print('处理完成');
                    //处理完成失败/成功
                    if(snapshot.hasError){
                      return new Text('${snapshot.error}',
                        style: TextStyle(color: Colors.red),);
                    }else{
                      return new Column(children: [
                        Text('icon:${snapshot.data?.icon}'),
                        Text('statusBarColor:${snapshot.data?.statusBarColor}'),
                        Text('url:${snapshot.data?.url}'),
                        Text('title:${snapshot.data?.title}'),
                      ]);
                    }
                  default:
                    print('错误？');
                    return new Text('错误');
                }
              }),
      ),
    );
  }
}

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

  CommonModel(
      {required this.icon,
      required this.title,
      required this.url,
      required this.statusBarColor,
      required 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']);
  }
}