Flutter笔记--异步

Flutter中的FutureBuilder是一个基于异步操作状态动态构建UI的Widget，当Future完成时，FutureBuilder会根据结果更新其子组件

FutureBuilder通过接收一个Future对象并监听其状态的变化来构建UI。根据Future的状态，FutureBuilder会调用不同的回调函数来构建对应的UI

原理:1)当Future还未完成时，FutureBuilder会调用builder回调函数，并传递一个BuildContext和AsyncSnapshot对象。可以根据AsyncSnapshot的状态来构建加载中的UI;2)当Future成功完成时，FutureBuilder会调用builder回调函数，并传递一个BuildContext和AsyncSnapshot对象。可以根据AsyncSnapshot的状态来构建成功完成时的UI，并使用AsyncSnapshot的data属性访问Future的结果数据;3)当Future发生错误时，FutureBuilder会调用errorBuilder回调函数，并传递一个BuildContext和错误对象。可以根据错误对象构建错误提示的UI

StreamBuilder是一个响应式小部件，用于根据Stream的最新数据动态构建widget,它是一个根据Stream对象的最新数据来构建widget的小部件。当Stream中有新数据产生时，StreamBuilder会根据这些数据更新其子组件，这使得StreamBuilder成为处理实时数据流并更新UI的理想选择； 原理:StreamBuilder会监听一个Stream对象的数据更新。当Stream中有新数据产生时，StreamBuilder会根据这些数据更新其子组件。这使得StreamBuilder成为处理实时数据流并更新UI的理想选择

demo:

import 'dart:async';
import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(home:  FutureAndStreamBuilderRoute(),));
}
class FutureAndStreamBuilderRoute extends StatefulWidget {
  @override
  _FutureAndStreamBuilderRouteState createState() =>
      _FutureAndStreamBuilderRouteState();
}
class _FutureAndStreamBuilderRouteState
    extends State<FutureAndStreamBuilderRoute> {
  var t = Future.delayed(Duration(seconds: 3), () => "从互联网上获取的数据源");
  @override
  Widget build(BuildContext context) {
//    return Center(
//      child: FutureBuilder<String>(
//        future: t,
//        builder: (BuildContext context, AsyncSnapshot snapshot) {
//          print(snapshot.connectionState);
//          if (snapshot.connectionState == ConnectionState.done) {
//            if (snapshot.hasError) {
//              return Text("Error: ${snapshot.error}");
//            } else {
//              return Text("Contents: ${snapshot.data}");
//            }
//          } else {
//            //
//            return CircularProgressIndicator();
//          }
//        },
//      ),
//    );
    return Center(
      child: StreamBuilder<int>(
        stream: counter(), //
        //initialData: ,// a Stream<int> or null
        builder: (BuildContext context, AsyncSnapshot<int> snapshot) {
          if (snapshot.hasError) return Text('Error: ${snapshot.error}');
          switch (snapshot.connectionState) {
            case ConnectionState.none:
              return Text('没有Stream');
            case ConnectionState.waiting:
              return Text('等待数据...');
            case ConnectionState.active:
              return Text('active: ${snapshot.data}');
            case ConnectionState.done:
              return Text('Stream已关闭');
          }
          return null; // unreachable
        },
      ),
    );
  }

  Future<String> mockNetworkData() async {
    return Future.delayed(Duration(seconds: 5), () => "从互联网上获取的数据源 HelloWorld");
  }

  Stream<int> counter() {
    return Stream.periodic(Duration(seconds: 1), (i) {
      return i;
    });
  }
}