Flutter 之 FutureBuilder 的学习和使用，Android2021 面试题

enum ConnectionState {//future 还未执行的快照状态 none,//连接到一个异步操作，并且等待交互，一般在这种状态的时候，我们可以加载个菊花 waiting,//连接到一个活跃的操作，比如 stream 流，会不断地返回值，并还没有结束，一般也是可以加载个菊花 active,//异步操作执行结束，一般在这里可以去拿取异步操作执行的结果，并显示相应的布局 done,}

下面的官方的例子。

FutureBuilder<String>(future: _calculation, // a previously-obtained Future<String> or nullbuilder: (BuildContext context, AsyncSnapshot<String> snapshot) {switch (snapshot.connectionState) {case ConnectionState.none:return Text('Press button to

《Android学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》
浏览器打开：qq.cn.hn/FTe 免费领取

start.');case ConnectionState.active:case ConnectionState.waiting:return Text('Awaiting result...');case ConnectionState.done:if (snapshot.hasError)return Text('Error: ${snapshot.error}^{\prime });returnText{(}^{\prime }Result:${snapshot.data}');}return null; // unreachable},)

3.实现思路，布局方式

• 网络请求：利用 Dio 库来请求玩 Android 的知识体系列表，api:www.wanandroid.com/tree/json
  

• 序列化 json：利用 json_serializable 来解析返回的 json 数据

• 布局：加载过程显示 CircularProgressIndicator，加载完成把数据显示到 ListView 中， 加载为空或者加载出错的话，显示相应的提示页面，并可以进行重试请求 一般。我们的列表页面都是有下拉刷新的功能，所以这里就用 RefreshIndicator 来实现。

4.代码实现

import 'package:flutter/material.dart';import 'package:dio/dio.dart';import 'entity.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {// This widget is the root of your application.@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Flutter Demo',theme: ThemeData(// This is the theme of your application.//// Try running your application with "flutter run". You'll see the// application has a blue toolbar. Then, without quitting the app, try// changing the primarySwatch below to Colors.green and then invoke// "hot reload" (press "r" in the console where you ran "flutter run",// or simply save your changes to "hot reload" in a Flutter IDE).// Notice that the counter didn't reset back to zero; the application// is not restarted.primarySwatch: Colors.blue,),home: FutureBuilderPage(),);}}

class FutureBuilderPage extends StatefulWidget {@override_FutureBuilderPageState createState() => _FutureBuilderPageState();}

class _FutureBuilderPageState extends State<FutureBuilderPage> {Future future;

@overridevoid initState() {// TODO: implement initStatesuper.initState();future = getdata();}

@overrideWidget build(BuildContext context) {return new Scaffold(appBar: new AppBar(title: new Text("知识体系"),actions: <Widget>[new IconButton(icon: Icon(Icons.search,color: Colors.white,),onPressed: null)],),body: buildFutureBuilder(),floatingActionButton: new FloatingActionButton(onPressed: () {setState(() {//测试 futurebuilder 是否进行没必要的重绘操作});}),);}

FutureBuilder<List<Data>> buildFutureBuilder() {return new FutureBuilder<List<Data>>(builder: (context, AsyncSnapshot<List<Data>> async) {//在这里根据快照的状态，返回相应的 widgetif (async.connectionState == ConnectionState.active ||async.connectionState == ConnectionState.waiting) {return new Center(child: new CircularProgressIndicator(),);}if (async.connectionState == ConnectionState.done) {debugPrint("done");if (async.hasError) {return new Center(child: new Text("ERROR"),);} else if (async.hasData) {