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

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

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

---

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

/// 异步加载组件的基本使用
class FutureBuilderPage extends StatefulWidget {
    
    
  @override
  _TestPageState createState() => _TestPageState();
}

/// 异步加载组件的基本使用
class _TestPageState extends State {
    
    
  ///这里的泛型就是异步加载的数据类型
  ///可自定义
  Future<String> _loadingFuture;

  @override
  void initState() {
    
    
    super.initState();
    _loadingFuture = loadingDataFunction();
  }

  @override
  Widget build(BuildContext context) {
    
    
    return Scaffold(
      appBar: AppBar(title: Text("异步加载数据"),),
      body: FutureBuilder<String>(
        //future：这个参数需要一个Future 对象，类似于 网络请求、IO
        future: _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("加载成功");
  }
  @override
  Widget build(BuildContext context) {
    
    
    return Scaffold(
      appBar: AppBar(
        title: Text("异步加载数据"),
      ),
      body: FutureBuilder<String>(
        //future：这个参数需要一个Future 对象，类似于 网络请求、IO
        future: _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;
        },
      ),
    );
  }
}

---

完结