如何利用FutureBuilder提高开发效率

常见场景

  • 展示请求按钮
  • 用户点击按钮，显示loading
  • 展示数据或者错误

抽象模式

  1. 展示请求按钮（初始状态）
  2. 用户点击按钮，显示loading（请求中状态）
  3. 展示数据或者错误 （结束状态（成功或失败））

转换成程序语言

以上三种现实情况对应 AsyncSnapshot 三个状态

  • ConnectionState.none 初始态
  • ConnectionState.waiting 请求态
  • ConnectionState.done 完成态
    • snapshot.hasError 完成（异常）
    • snapshot.hasData  完成（正常）

使用 FutureBuilder 处理这个场景

这篇文章的主角，FutureBuilder 就是为了解决这个问题存在的。它接收一个 Future 请求，和对应以上几种情况的 widget 回调。即可把数据和界面串联起来，避免额外声明仅用来传递数据用的变量。

提前声明了一个 _showResult 变量，以表示页面是否触发请求。

并且封装了一个 _fetch() 网络请求。

Future<Map> _fetch() async {
 return (await Dio().get("https://jsonplaceholder.typicode.com/users/1"))
 .data;
}

请求的结果是任意的，不管是封装好的对象，map，list，都可以，只要是一个 Future<T>
把这个 Future 调用安放到 FutureBuilder 的 future 参数上， 并用 _showResult 来控制何时来触发这个请求。

FutureBuilder(
 future: _showResult ? _fetch() : null,
 ...
)

再把每一个 Future 的结果对应的 widget 设置到 builder 参数上：

FutureBuilder(
 ...
 builder: (context, snapshot) {
  switch (snapshot.connectionState) {
  case ConnectionState.none: // -------- 初始态
   return RaisedButton(
   onPressed: () {
    setState(() {
    _showResult = true; // 点击按钮，触发请求
    });
   },
   child: Text("start"),
   );
  case ConnectionState.waiting: // -------- 请求态
   return CircularProgressIndicator();
  case ConnectionState.done: // -------- 完成态
   if (snapshot.hasError) { // 异常
   return Text(
    '${snapshot.error}',
    style: TextStyle(color: Colors.red),
   );
   } else { // 正常
   return Text(snapshot.data["name"]);
   }
   break;
  default:
   break;
  }
  return Container();
 },
 ),

总结

FutureBuilder 把数据请求的 Future<T> 中的数据 T 通过 Builder 的 ConnectionState 衍生出所有可能性，并在每个可能性里 return 一个 Widgets。最终实现了 state -> UI 的目的

好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对我们的支持。

赞 (0)

相关推荐

  • 如何利用FutureBuilder提高开发效率

    如何利用FutureBuilder提高开发效率

    常见场景 展示请求按钮 用户点击按钮,显示loading 展示数据或者错误 抽象模式 展示请求按钮(初始状态) 用户点击按钮,显示loading(请求中状态) 展示数据或者错误 (结束状态(成功或失败)) 转换成程序语言 以上三种现实情况对应 AsyncSnapshot 三个状态 ConnectionState.none 初始态 ConnectionState.waiting 请求态 ConnectionState.done 完成态 snapshot.hasError 完成(异常) snapsh

  • Python利用IPython提高开发效率

    Python利用IPython提高开发效率

    一.IPython 简介 IPython 是一个交互式的 Python 解释器,而且它更加高效. 它和大多传统工作模式(编辑 -> 编译 -> 运行)不同的是, 它采用的工作模式是:执行 -> 探索 ,而大部分和数据分析相关的代 码都含有探索式操作(比如试误法和迭代法),所以 IPython 能大大提高编码效率. IPython 发展到现在,它不仅仅只是一个加强版的 Python shell 了, 它集成了 GUI 控制台,这可以让你直接进行绘图操作:它还有一个基于 Web 的交互式笔记

  • IntelliJ Idea常用11款插件(提高开发效率)

    插件安装方式: 新版本IDE安装方式略有不同,不一一赘述 1.Background Image Plus 这款插件并不能直接提高你的开发效率,但是可以让你面对的IDE不再单调,当把背景设置成你自己心仪的的图片, 是不是会感觉很赏心悦目,编码效率会不会因此间接的提高?! 使用方法: 注意,如果是IDEA版本是2020.1版本以上就不需要再额外装这个插件,这个插件是已经内置安装了.  2.Mybatis Log Plugin Mybatis现在是java中操作数据库的首选,在开发的时候,我们都会把M

  • IDEA提高开发效率的7个插件(推荐)

    1. 多行编辑 先来体验一下从xml文件拷贝字段新建实体对象 一般我们为了新建多表连接后映射的 ResultMap ,耗费不少时间,那么我们就来试一试这个多行编辑 表字段存在下划线,而实体中不允许,更是讨厌 ,等着一招教你解决 前提条件,安装一个idea的插件,用来驼峰与下划线互转的:CamelCase 步骤: ① 多行选择,按住ALT(windows)/option(Mac) ,拉动鼠标就可 ② 选中字段对象 Win Ctrl+shift+左箭头 Mac option+shift+左箭头 ③

  • [Asp.Net Core]提高开发效率的方法

    一.概述 在园子里面有很多关于各种技术细节的研究文章,都是比较牛逼的框架研究:但是一直没有看到关于怎么样提高开发效率的文章,大多提高开发效率的文章都是关于自动化等方面的辅助工具类型的,而不是开发中的一些小技巧:今天从编码规范.编码技巧.开发思想.设计模式等各方面的经验来分享如何提高开发效率. 二.实际场景 在这个前后端分离盛行的开发年代,分工比较明确,开发者分前端开发者和后端开发者,然而感到欣慰的是.net 开发者大多是担任着全栈开发的职责,有经验的开发者都是从前端走过来的,说白了前端业务代码对

  • 13个Pandas实用技巧，助你提高开发效率

    原作:风控猎人 整理:数据管道 归纳整理了一些工作中常用到的pandas使用技巧,方便更高效地实现数据分析. 1.计算变量缺失率 df=pd.read_csv('titanic_train.csv') def missing_cal(df): """ df :数据集 return:每个变量的缺失率 """ missing_series = df.isnull().sum()/df.shape[0] missing_df = pd.DataFram

  • python 中的9个实用技巧，助你提高开发效率

    整理字符串输入 整理用户输入的问题在编程过程中极为常见.通常情况下,将字符转换为小写或大写就够了,有时你可以使用正则表达式模块「Regex」完成这项工作.但是如果问题很复杂,可能有更好的方法来解决: user_input = "This string has some whitespaces... " character_map = { ord( ) : , ord( ) : , ord( ) : None } user_input.translate(character_map) #

  • git 一个可以提高开发效率的命令：cherry-pick详解

    各位码农朋友们一定有碰到过这样的情况:在develop分支上辛辛苦苦撸了一通代码后开发出功能模块A,B,C,这时老板过来说,年青人,我们现在先上线功能模块A,B.你一定心里一万只草泥马奔腾而过,但为了混口饭吃必须得按老板的意思办事啊. 怎么办?一个办法就是,重新建一个分支,然后再把功能模块C回退,留下功能模块A,B.这种做法不是不行,但是有更好的办法,那就是git所提供的cherry-pick功能. cherry-pick类似于一个定制化的merge,它可以把其它分支上的commit一个个摘下来

  • python 提高开发效率的5个小技巧

    很多时候学习是一种难者不会,会者不难的事情. 下面的5个python技巧是性价比极高的知识点,一学就会,不难但是相当管用. 使用交互模式 使用python -i xxxx.py可以直接进入python的交互模式,可以很方便的调用xxxx.py中定义的方法和函数,特别适合调试没有main()方法的文件,强力推荐. 使用pdb进行调试 很多从c++/java转到python的同学可能对python没有断点功能相当失望. 其实python自带的pdb库就可以解决这个问题. 看这个例子. def sum

  • 20个提高开发效率的VS Code快捷键（推荐）

    20个提高开发效率的VS Code快捷键（推荐）

    以下为译文: 并不是每一个开发者都有足够的时间,去了解熟悉所有的快捷键,来帮助我们提高编码效率.因为快捷键实在是太多了. 所以,下面我列出了我最喜欢的快捷键. 1.多行转一行 在 MAC 上:Ctrl + J 在 Ubuntu/Windows 上:通过File> Preferences > Keyboard shortcuts打开快捷键的设置,并且绑定editor.action.joinLines你自己的快捷键. 2.格式化代码 这个快捷键可以帮助我们对代码进行缩进. 注:可以在编码的任何时候

随机推荐