题记
—— 优美的应用体验 来自于细节的处理，更源自于码农的自我要求与努力，当然也需要码农年轻灵活的思维。
<p>盘点Flutter跨平台APP开发中使用到的进度条</p> </div> <p/> <p>Flutter是谷歌推出的最新的移动开发框架。RefreshIndicator 是 Material 风格的滑动刷新Widget ，效果是下拉刷新显示的加载圆圈。<br/> <img src="https://img-blog.csdnimg.cn/20201111075114234.png?x-oss-process=image/watermark,type\_ZmFuZ3poZW5naGVpdGk,shadow\_10,text\_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3psMTg2MDM1NDM1NzI=,size\_16,color\_FFFFFF,t\_70#pic\_center" alt="在这里插入图片描述"/></p> <hr/> <p>本文章实现Demo运行效果 如下：</p> <p><img src="https://img-blog.csdnimg.cn/20201111073753190.gif#pic\_center" alt="在这里插入图片描述"/></p> <p><strong>Demo配置如下</strong></p> <pre><code class="prism language-java"><span class="token comment">///下拉刷新组件</span> <span class="token keyword">class</span> <span class="token class-name">HomePageRefreshIndicator</span> <span class="token keyword">extends</span> <span class="token class-name">StatefulWidget</span> <span class="token punctuation">{<!-- --></span> <span class="token annotation punctuation">@override</span> \_TestPageState <span class="token function">createState</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token function">\_TestPageState</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">class</span> <span class="token class-name">\_TestPageState</span> <span class="token keyword">extends</span> <span class="token class-name">State</span><span class="token generics function"><span class="token punctuation"><</span>HomePageRefreshIndicator<span class="token punctuation">></span></span> <span class="token punctuation">{<!-- --></span> <span class="token annotation punctuation">@override</span> Widget <span class="token function">build</span><span class="token punctuation">(</span>BuildContext context<span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span> <span class="token keyword">return</span> <span class="token function">Scaffold</span><span class="token punctuation">(</span> appBar<span class="token operator">:</span> <span class="token function">AppBar</span><span class="token punctuation">(</span> title<span class="token operator">:</span> <span class="token function">Text</span><span class="token punctuation">(</span><span class="token string">"下拉刷新"</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token comment">//下拉刷新组件</span> body<span class="token operator">:</span> <span class="token function">RefreshIndicator</span><span class="token punctuation">(</span> <span class="token comment">//圆圈进度颜色</span> color<span class="token operator">:</span> Colors<span class="token punctuation">.</span>blue<span class="token punctuation">,</span> <span class="token comment">//下拉停止的距离</span> displacement<span class="token operator">:</span> <span class="token number">44.0</span><span class="token punctuation">,</span> <span class="token comment">//背景颜色</span> backgroundColor<span class="token operator">:</span> Colors<span class="token punctuation">.</span>grey<span class="token punctuation">\[</span><span class="token number">200</span><span class="token punctuation">\]</span><span class="token punctuation">,</span> onRefresh<span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> async <span class="token punctuation">{<!-- --></span> <span class="token comment">//模拟网络请求</span> await Future<span class="token punctuation">.</span><span class="token function">delayed</span><span class="token punctuation">(</span><span class="token function">Duration</span><span class="token punctuation">(</span>milliseconds<span class="token operator">:</span> <span class="token number">2000</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//结束刷新</span> <span class="token keyword">return</span> Future<span class="token punctuation">.</span><span class="token function">value</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">//一个列表 </span> child<span class="token operator">:</span> ListView<span class="token punctuation">.</span><span class="token function">builder</span><span class="token punctuation">(</span> itemBuilder<span class="token operator">:</span> <span class="token punctuation">(</span>BuildContext context<span class="token punctuation">,</span> <span class="token keyword">int</span> index<span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span> <span class="token keyword">return</span> <span class="token function">Container</span><span class="token punctuation">(</span> height<span class="token operator">:</span> <span class="token number">66</span><span class="token punctuation">,</span> child<span class="token operator">:</span> <span class="token function">Text</span><span class="token punctuation">(</span><span class="token string">"测试数据"</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">//列表数据源数量</span> itemCount<span class="token operator">:</span> <span class="token number">100</span><span class="token punctuation">,</span> <span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> </code></pre> <hr/> <p>【x1】微信公众号的每日提醒 随时随记 每日积累 随心而过 文章底部扫码关注</p> <p><a href="https://www.toutiao.com/c/user/token/MS4wLjABAAAAYMrKikomuQJ4d-cPaeBqtAK2cQY697Pv9xIyyDhtwIM/">【x2】各种系列的视频教程 免费开源 关注 你不会迷路</a></p> <p><a href="https://biglead.blog.csdn.net/article/details/93532582">【x3】系列文章 百万 Demo 随时 复制粘贴 使用</a></p> <p><a href="https://github.com/zhaolongs/flutter\_demo\_app/blob/master/lib/progress/test\_RefreshIndicator\_page.dart">【x4】一目了然的源码</a></p> <p><a href="https://www.zhihu.com/zvideo/1308873518554267648">【x5】简短的视频不一样的体验</a></p> <hr/> <p>不局限于思维，不局限语言限制，才是编程的最高境界。</p> <p>以小编的性格，肯定是要录制一套视频的，随后会上传</p> <p>有兴趣 你可以关注一下 <a href="https://www.toutiao.com/c/user/token/MS4wLjABAAAAYMrKikomuQJ4d-cPaeBqtAK2cQY697Pv9xIyyDhtwIM/">西瓜视频 — 早起的年轻人</a></p> <p>本文章 的源码<a href="https://github.com/zhaolongs/flutter\_demo\_app/blob/master/lib/progress/test\_RefreshIndicator\_page.dart">在这里</a><br/> <img src="https://img-blog.csdnimg.cn/20201031094959816.gif#pic\_center" alt="在这里插入图片描述"/></p>
本文同步分享在 博客“早起的年轻人”（CSDN）。
如有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。