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;
        },
      ),
    );
  }
}


完结
公众号 我的大前端生涯

早起的年轻人 CSDN认证博客专家 移动开发 项目管理 Java
只要用心去做,每一件事情还是有可能成功的,当然成功是没有界限的,只不过是达到自己心里的那个目标,公众号:我的大前端生涯,一个爱喝茶的程序员,通常会搞搞SpringBoot 、Herbinate、Mybatiys、Android、iOS、Flutter、Vue、小程序等.
©️2020 CSDN 皮肤主题: 代码科技 设计师:Amelia_0503 返回首页