当前位置: 首页 > 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.lryc.cn/news/572160.html

相关文章:

  • 对gateway和nocas的理解
  • DeepSeek 助力 Vue3 开发:打造丝滑的日历(Calendar),日历_项目里程碑示例(CalendarView01_22)
  • 局域网即时通讯软件评测:4款支持私有化部署的通讯软件对比
  • 2025 Java EasyExcel 基于Excel模板填充数据 SpringBoot+Mybatis-Flex
  • el-image在表格中显示,弹出的预览图片被遮挡,如何解决
  • 【网络空间安全】数据安全
  • 蜻蜓Q系统的技术演进:从Laravel 6到Laravel 8的升级之路-优雅草卓伊凡
  • 时序数据库概念及IoTDB特性详解
  • 若依导出模板时设置动态excel下拉框(表连接的)
  • 企微CRM系统中的任务分配与效率提升技巧
  • Mac电脑 - Sublim Text 代码编辑器
  • 大数据基础学习指南:从核心概念到技术生态全景
  • 蓝牙物联网多个核心应用场景开发与应用细化分析
  • Vue3中使用 Vue Flow 流程图方法
  • 在 Dify 平台部署一个 知识库问答(KBQA) 工作流
  • 设计模式之五大设计原则(SOLID原则)浅谈
  • 进程间通信2(命名管道)linux
  • 专题:2025游戏科技与市场趋势报告|附130+份报告PDF汇总下载
  • day35-Django(1)
  • FPGA基础 -- Verilog 系统任务与系统函数
  • angular 图斑点击,列表选中并滚动到中间位置
  • 探索算法秘境:量子随机游走算法及其在图论问题中的创新应用
  • Python 自动化运维与DevOps实践
  • JVM(7)——详解标记-整理算法
  • 基于YOLOv10算法的交通信号灯检测与识别
  • RTSP播放器低延迟实践:一次对毫秒级响应的技术探索
  • 从零开始的云计算生活——第二十天,脚踏实地,SSH与Rsync服务
  • ThinkPHP结合使用PHPConsole向Chrome 控制台输出SQL
  • 计算机网络 网络层:数据平面(一)
  • ​ CATIA V5与3DEXPERIENCE协同设计:引领无人机行业新纪元