Flutter 异步UI更新（FutureBuilder、StreamBuilder）

FutureBuilder

class AsyncUpdateUI extends StatefulWidget {
  const AsyncUpdateUI({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<AsyncUpdateUI> createState() {
    return FutureBuilderState();
  }
}

class FutureBuilderState extends State<AsyncUpdateUI> {

   Future<String> mockNetworkData() async{
	    return Future.delayed(const Duration(seconds: 2),()=>'我是从互联网获取的数据');
   }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.title)),
      body: Center(
        child: FutureBuilder<String>(
          future: mockNetworkData(),
          builder: (BuildContext context, AsyncSnapshot snapshot) {
            //请求结束
            if (snapshot.connectionState == ConnectionState.done) {
              if (snapshot.hasError) {
                return Text("Error:${snapshot.error}"); //失败
              } else {
                //成功
                return Text("Contents：${snapshot.data}");
              }
            }else{
              return const CircularProgressIndicator();
            }
          },
        ),
      ),
    );
  }
}

加载	结果

StreamBuilder

class AsyncUpdateUI extends StatefulWidget {
  const AsyncUpdateUI({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<AsyncUpdateUI> createState() {
    return StreamBuilderState();
  }
}

class StreamBuilderState extends State<AsyncUpdateUI>{

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.title)),
      body: StreamBuilder<int>(
        stream: counter(),
        builder: (BuildContext context,AsyncSnapshot snapshot){
          if(snapshot.hasError){
            return Text('Error: ${snapshot.error}');
          }else {
            switch(snapshot.connectionState){
              case ConnectionState.none:
                return const Text('没有Stream');
              case ConnectionState.waiting:
                return const Text('等待数据...');
              case ConnectionState.active:
                return Text('active: ${snapshot.data}');
              case ConnectionState.done:
                return const Text('Stream 已关闭');
            }
          }
        },
      ),
    );
  }
}

加载	结果