当前位置: 首页 > news >正文

Flutter中FutureBuilder和StreamBuilder

在 Flutter 中,如果你想让 FutureBuilderfuture 函数再次执行,可以通过以下几种方式实现:


方法 1:使用 Key 强制重建 FutureBuilder

通过改变 FutureBuilderkey,可以强制 Flutter 重建它,从而重新执行 future 函数:

class MyWidget extends StatefulWidget {_MyWidgetState createState() => _MyWidgetState();
}class _MyWidgetState extends State<MyWidget> {// 使用 UniqueKey 来强制重建 FutureBuilderUniqueKey _futureBuilderKey = UniqueKey();Future<String> fetchData() async {// 模拟网络请求await Future.delayed(Duration(seconds: 2));return "New Data: ${DateTime.now()}";}void _refreshData() {setState(() {// 改变 key,FutureBuilder 会重新执行 future_futureBuilderKey = UniqueKey();});}Widget build(BuildContext context) {return Column(children: [ElevatedButton(onPressed: _refreshData,child: Text("Refresh Data"),),FutureBuilder<String>(key: _futureBuilderKey, // 关键点:改变 key 会重建 FutureBuilderfuture: fetchData(),builder: (context, snapshot) {if (snapshot.connectionState == ConnectionState.waiting) {return CircularProgressIndicator();}if (snapshot.hasError) {return Text("Error: ${snapshot.error}");}return Text("Data: ${snapshot.data}");},),],);}
}

方法 2:使用 StatefulWidget 管理 future

StatefulWidget 中存储 future,并在需要刷新时重新调用 fetchData

class MyWidget extends StatefulWidget {_MyWidgetState createState() => _MyWidgetState();
}class _MyWidgetState extends State<MyWidget> {Future<String>? _futureData;Future<String> fetchData() async {await Future.delayed(Duration(seconds: 2));return "New Data: ${DateTime.now()}";}void initState() {super.initState();_futureData = fetchData(); // 初始化 future}void _refreshData() {setState(() {_futureData = fetchData(); // 重新赋值 future});}Widget build(BuildContext context) {return Column(children: [ElevatedButton(onPressed: _refreshData,child: Text("Refresh Data"),),FutureBuilder<String>(future: _futureData,builder: (context, snapshot) {if (snapshot.connectionState == ConnectionState.waiting) {return CircularProgressIndicator();}if (snapshot.hasError) {return Text("Error: ${snapshot.error}");}return Text("Data: ${snapshot.data}");},),],);}
}

方法 3:使用 StreamBuilder 替代 FutureBuilder

如果数据需要频繁刷新,可以考虑使用 Stream + StreamBuilder

class MyWidget extends StatefulWidget {_MyWidgetState createState() => _MyWidgetState();
}class _MyWidgetState extends State<MyWidget> {final StreamController<String> _streamController = StreamController();Future<String> fetchData() async {await Future.delayed(Duration(seconds: 2));return "New Data: ${DateTime.now()}";}void _refreshData() {fetchData().then((data) {_streamController.add(data); // 手动推送新数据到 Stream});}void initState() {super.initState();_refreshData(); // 初始化数据}void dispose() {_streamController.close();super.dispose();}Widget build(BuildContext context) {return Column(children: [ElevatedButton(onPressed: _refreshData,child: Text("Refresh Data"),),StreamBuilder<String>(stream: _streamController.stream,builder: (context, snapshot) {if (snapshot.connectionState == ConnectionState.waiting) {return CircularProgressIndicator();}if (snapshot.hasError) {return Text("Error: ${snapshot.error}");}return Text("Data: ${snapshot.data}");},),],);}
}

总结

方法适用场景特点
改变 Key简单场景强制重建 FutureBuilder,适合一次性刷新
重新赋值 future推荐方式通过 setState 更新 future,逻辑清晰
StreamBuilder频繁刷新适合需要持续监听数据变化的场景

选择最适合你需求的方式即可!

http://www.lqws.cn/news/446167.html

相关文章:

  • 解决Vue再浏览器的控制台中更新属性不生效
  • C++实现手写strstr函数
  • 什么是池化
  • Arduino Nano 33 BLE Sense Rev 2开发板使用指南之【环境搭建 / 点灯】
  • 数据库连接池(Druid、HikariCP)详解
  • Java 正则表达式高级用法
  • Debian配置Redis主从、哨兵
  • 啊啊啊啊啊啊啊啊code
  • Arduino Nano 33 BLE Sense Rev 2开发板使用指南之【外设开发】
  • 目标:创建一个钱包,挖一些币,然后查看余额
  • 算法导论第十八章 计算几何:算法中的空间艺术
  • 使用 mysql2/promise 模块返回以后,使用 await 返回数据总结
  • 声网对话式 AI:开启我的编程进阶之旅
  • CDH部署HDFS详细指南
  • Arduino入门教程​​​​​​​:12、WS2812B
  • 不会PLC,怎么学上位机?
  • 在 Mac 上配置 Charles,抓取 iOS 手机端接口请求
  • 写实数字人:开启教学新纪元,重塑教育生态
  • 股票心理学习篇:交易的人性弱点 - 频繁交易
  • 基于 Apache POI 实现的 Word 操作工具类
  • 目标检测之YOLOV11自定义数据使用OBB训练与验证
  • 用Java将PDF转换成GIF
  • 关于嵌入式编译工具链与游戏移植的学习
  • S32K328打断点调试进入main函数之前的准备工作
  • 如何保证MySQL与Redis数据一致性方案详解
  • 中科米堆全自动三维光学测量航空部件尺寸测量分析
  • 白热化买量竞争下,消除手游如何巧借“创意”破局?
  • OpenLayers 加载投影坐标GeoTIFF影像
  • 微信小程序canvas实现抽奖动画
  • react forwardRef和readux的connect冲突,导致ref.current获取不到值