产品设计效果

image.png

加载数据缓慢时增加等待效果，转圈圈

技术参数

实现代码

核心涉及到了FutureBuilder个组件

FutureBuilder(
        future: _loadFuture,
        builder: (BuildContext context, AsyncSnapshot<dynamic> snapshot) {
          if (snapshot.hasError) {
            return Center(child: Text('发生错误: ${snapshot.error}'));
          }
          switch (snapshot.connectionState) {
            case ConnectionState.waiting:
              return Container(
                child: Center(
                  child: CircularProgressIndicator(),
                ),
              );
            case ConnectionState.active:
            case ConnectionState.done:
              return _ToDoListPageBody(_todoGroupList, todoType);
            case ConnectionState.none:
            default:
              return Center(
                child: Text('请求失败'),
              );
          }
        },
      )

  //定义future
  var _loadFuture;
  @override
  void initState() {
    super.initState();
    _loadFuture = _loadData();
  }


Future<dynamic> _loadData() async {
    ///此处写业务处理逻辑
    //延迟若干秒
    await Future.delayed(const Duration(seconds: 1), () {
      L.i("延迟执行");
    });

    return 'ok';
  }

实现效果

GIF.gif

注意事项

FutureBuilder监控了state的变化而触发相关逻辑，将_loadFuture 放入初始化方法中防止_loadFuture的无限重复调用

---

前端二把刀
你以为的仅仅是你以为的