Flutter之FutureBuilder的学习和使用,Android开发快速学习

none,
//连接到一个异步操作,并且等待交互,一般在这种状态的时候,我们可以加载个菊花
waiting,
//连接到一个活跃的操作,比如stream流,会不断地返回值,并还没有结束,一般也是可以加载个菊花
active,
//异步操作执行结束,一般在这里可以去拿取异步操作执行的结果,并显示相应的布局
done,
}

下面的官方的例子。

FutureBuilder(
future: _calculation, // a previously-obtained Future or null
builder: (BuildContext context, AsyncSnapshot snapshot) {
switch (snapshot.connectionState) {
case ConnectionState.none:
return Text(‘Press button to start.’);
case ConnectionState.active:
case ConnectionState.waiting:
return Text(‘Awaiting result…’);
case ConnectionState.done:
if (snapshot.hasError)
return Text(‘Error: ${snapshot.error}’);
return Text(‘Result: ${snapshot.data}’);
}
return null; // unreachable
},
)

3.实现思路,布局方式

  • 网络请求:利用Dio库来请求玩Android的知识体系

  • 12
    点赞
  • 18
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Flutter中的FutureBuilder是一种异步UI构建模式,它可以帮助我们在等待异步操作完成时展示一些占位符UI,等异步操作完成后再用数据替换掉占位符UI。在封装FutureBuilder时,我们可以创建一个可重用的Widget,使得我们在多个页面或多个地方都可以调用这个Widget来展示异步数据。 下面是一个简单的FutureBuilder封装Widget的例子: ``` import 'package:flutter/material.dart'; class FutureBuilderWidget<T> extends StatelessWidget { final Future<T> future; final Widget Function(BuildContext, T) builder; final Widget Function(BuildContext, dynamic) errorBuilder; final Widget waitingWidget; const FutureBuilderWidget({ Key key, this.future, this.builder, this.errorBuilder, this.waitingWidget, }) : super(key: key); @override Widget build(BuildContext context) { return FutureBuilder<T>( future: future, builder: (context, snapshot) { if (snapshot.connectionState == ConnectionState.waiting) { return waitingWidget ?? Center(child: CircularProgressIndicator()); } else if (snapshot.hasData) { return builder(context, snapshot.data); } else { return errorBuilder != null ? errorBuilder(context, snapshot.error) : Center(child: Text('Error: ${snapshot.error}')); } }, ); } } ``` 在这个封装Widget中,我们传入了一个future和一个builder函数,当future完成后,会把得到的数据传入builder函数中进行处理。同时,我们还可以传入一个errorBuilder和一个waitingWidget,分别用于处理异步操作出错和等待异步操作完成时的占位符UI。 下面是一个使用这个封装Widget的例子: ``` class MyHomePage extends StatelessWidget { final Future<String> futureData = Future.delayed(Duration(seconds: 2), () => "Hello, FutureBuilder!"); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('FutureBuilder Example'), ), body: FutureBuilderWidget<String>( future: futureData, waitingWidget: Center(child: CircularProgressIndicator()), builder: (context, data) => Center(child: Text(data)), errorBuilder: (context, error) => Center(child: Text('Error: $error')), ), ); } } ``` 在这个例子中,我们定义了一个futureData,它会在2秒后返回一个字符串。在MyHomePage中,我们调用了FutureBuilderWidget,传入了futureData以及builder、errorBuilder和waitingWidget函数,分别定义了异步完成后的UI、异步失败后的UI和等待异步完成时的UI。运行这个例子后,我们会看到一个圆形进度条,等待2秒后,进度条消失,我们看到了异步操作完成后的字符串。如果异步操作出现了错误,我们也会看到一个错误提示。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值