Flutter异步加载FutureBuilder重绘解决方案

题记
—— 执剑天涯，从你的点滴积累开始，所及之处，必精益求精，即是折腾每一天。

**	你可能需要
CSDN	网易云课堂教程
掘金	EDU学院教程
知乎	Flutter系列文章

通过FutureBuilder组件可实现在Flutter中将异步加载的数据更新显示到对应的组件上，基本使用代码如下：


/// 异步加载组件的基本使用
class FutureBuilderPage extends StatefulWidget {@override_TestPageState createState() => _TestPageState();
}/// 异步加载组件的基本使用
class _TestPageState extends State {///这里的泛型就是异步加载的数据类型///可自定义Future<String> _loadingFuture;@overridevoid initState() {super.initState();_loadingFuture = loadingDataFunction();}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("异步加载数据"),),body: FutureBuilder<String>(//future：这个参数需要一个Future 对象，类似于 网络请求、IOfuture: _loadingFuture,///这里的数据格式与上述FutureBuilder设置的泛型格式一至initialData: "初始化的数据",///构建显示的 Widget  会根据加载的状态来多次回调些方法builder: (BuildContext context, AsyncSnapshot<String> snapshot) {//加载状态判断switch (snapshot.connectionState) {///可理解为初始加载显示的 Widget 异步加载开始时的回调case ConnectionState.none:return  Text('Result: ${snapshot.data}');///异步加载中的回调case ConnectionState.active:case ConnectionState.waiting:return CircularProgressIndicator();///异步加载完成的回调case ConnectionState.done://判断是否加载失败if (snapshot.hasError) {return Text('Error: ${snapshot.error}');} else {///通过 [snapshot.data]来获取异步加载的数据return Text('Result: ${snapshot.data}');}}return null;},),);}///模拟耗时的网络请求Future<String> loadingDataFunction() async {///模拟await Future.delayed(Duration(milliseconds: 4000));return Future.value("加载成功");}
}

运行效果如下：

需要特别注意的是为防止FutureBuilder组件的重绘问题，异步加载loadingFuture需要单独定义，一般定义在初始化函数中，另一种方式是结合AsyncMemoizer异步寄存器来保证异步加载只执行一次，在使用时使用别导包如下

import 'package:async/async.dart' show AsyncMemoizer;

然后对应的使用代码如下：


/// 异步加载组件的基本使用
class FutureBuilderPage2 extends StatefulWidget {@override_TestPageState createState() => _TestPageState();
}/// 异步加载组件的基本使用
class _TestPageState extends State {///定义异步寄存器AsyncMemoizer _memoization = AsyncMemoizer<String>();///模拟耗时的网络请求Future<String> loadingDataFunction() async {///模拟await Future.delayed(Duration(milliseconds: 4000));return Future.value("加载成功");}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("异步加载数据"),),body: FutureBuilder<String>(//future：这个参数需要一个Future 对象，类似于 网络请求、IOfuture: _memoization.runOnce(loadingDataFunction),///这里的数据格式与上述FutureBuilder设置的泛型格式一至initialData: "初始化的数据",///构建显示的 Widget  会根据加载的状态来多次回调些方法builder: (BuildContext context, AsyncSnapshot<String> snapshot) {//加载状态判断switch (snapshot.connectionState) {///可理解为初始加载显示的 Widget 异步加载开始时的回调case ConnectionState.none:return Text('Result: ${snapshot.data}');///异步加载中的回调case ConnectionState.active:case ConnectionState.waiting:return CircularProgressIndicator();///异步加载完成的回调case ConnectionState.done://判断是否加载失败if (snapshot.hasError) {return Text('Error: ${snapshot.error}');} else {///通过 [snapshot.data]来获取异步加载的数据return Text('Result: ${snapshot.data}');}}return null;},),);}
}

完结

Flutter异步加载FutureBuilder重绘解决方案相关推荐

Flutter 异步加载数据并渲染列表
这里踩了一脚坑,写flutter的时候还是与js有差异的,这里主要涉及到几个知识点,看官需要对几部分内容先理解才容易处理,PS:其实现在我也还有点懵~ 1. 网络请求,这里我分别使用了dio和http ...
FLutter入门：异步加载组件FutureBuilder
FutureBuilder 在实际开发中,进入一个页面后执行网络请求加载数据并显示是非常普遍的,这时候我们一般会显示loading直到加载完成显示正常页面.在flutter中我们可以在initStat ...
Android ListView异步加载图片乱序问题，原因分析及解决方案
转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/45586553 在Android所有系统自带的控件当中,ListView这个控件算是 ...
Flutter进阶—网络与本地异步加载资源
通过网络加载JSON文件的实例 import 'dart:convert'; import 'package:flutter/material.dart'; import 'package:http/ ...
U3D Addressables异步加载资源，创建大物体卡顿解决方案
目前做的游戏里,因为是仙侠游戏,特效都是手绘的,需要用到特别多的SPINE文件,一个主角身上可能有上百个动画文件和贴图,创建起来特别特别慢,要四五十秒,试了一下,设置QualitySettings.S ...
Echarts 异步请求不能加载本地JSON数据解决方案，以及Http-Server安装与使用
文章目录一.前言二.分析&解决方案三.Http-Server简介&安装方法四.启动http本地服务方法五.附:Http-Server可选配置一.前言最近学习eharts制 ...
模仿SDWebImage实现异步加载图片
模仿SDWebImage实现异步加载图片 SDWebImage想必大家都不陌生吧,要实现它的图片异步加载功能这个还是很简单的. 注意:此处我只实现了异步加载图片,并没有将文件缓存到本地的打算哦:) 源 ...
浏览器渲染阻塞与优化-详解推迟加载、异步加载。
我认为一个前端工程师是否优秀,很大程度上取决于对前端性能上优化的功力.所以性能优化对前端真的很重要!!! 本文介绍了什么是阻塞.为什么会阻塞?阻塞优化常用的5种方式以及他们的注意事项. 浏览器渲染阻塞 ...
android学习笔记---64_ListView数据异步加载与AsyncTask
2013/5/26 Java技术qq交流群:JavaDream:251572072 64_ListView数据异步加载与AsyncTask ------------------------------ ...

Flutter异步加载FutureBuilder重绘解决方案

Flutter异步加载FutureBuilder重绘解决方案相关推荐

最新文章

热门文章