使用 FutureProvider 简化个人主页异步请求的状态管理

前言

好久没有讲界面的内容了,本篇做一个个人主页的头部区域,一方面是讲一下 Flutter 的 Stack 层叠组件的用法,另一方面是 Provider 的 FutureProvider 的使用。

界面分析

拿到界面,我们首先分析一下界面的结构,头部这部分从下到上由如下内容组成:

  • 底图和头像
    • 底部 Banner 图:在最底部;
    • 头像:包括头像图片下的背景圆(或边框),叠加在底部 Banner 上;
  • 用户名称、级别、工作信息(头衔及公司)及个人介绍等个人信息:在底图和头像下方。
  • 关注、关注者和掘力值等统计数据:在用户信息下方。
  • 返回按钮:返回按钮在整个页面的顶层,以便可以随时点击返回。

得到我们页面的布局结构如下图所示。其中头像和 Banner 因为重叠了,需要使用一个 Stack 组件包裹,即蓝色的区域。

使用 FutureProvider 简化个人主页异步请求的状态管理

组件结构

确定好了布局,我们再来确定使用什么样的组件,各个布局区域对应的组件如下:

  • 返回按钮:IconButton,使用一个返回图标按钮,点击后返回上一页。
  • Banner:使用 C
上一篇:你可能不知道的反爬虫知识


下一篇:字符串函数中的求长度、查找、分割和错误报告函数(strlen,strstr,strtok,strerror)