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 {
  @override
  State<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);
  }

  @override
  Widget 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'],
    );
  }
}