当前位置: 首页 > 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频繁刷新适合需要持续监听数据变化的场景

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

相关文章:

  • Haproxy搭建web集群
  • 使用 Prometheus 访问 TDengine ---
  • 计算机导论期末快速复习指南
  • 第一章 SQL编程系列-数据库介绍与安装
  • Unity UI 核心类解析之Graphic
  • crawl4ai 框架的入门讲解和实战指南——基于Python的智能爬虫框架,集成AI(如NLP/OCR)实现自动化数据采集与处理
  • DDS 问题排查
  • 基于自然语言处理的智能问答系统(模型训练+部署测试)
  • 【图片识别改名】批量识别图片中的文字对图片进行改名,识别文字对图片重新命名的操作步骤和注意事项
  • python学智能算法(十四)|机器学习朴素贝叶斯方法进阶-CountVectorizer文本处理简单测试
  • CD45.【C++ Dev】STL库的list的使用
  • 前端基础知识CSS系列 - 14(CSS提高性能的方法)
  • windows,java后端开发常用软件的下载,使用配置
  • Spring MVC参数绑定终极手册:单多参对象集合JSON文件上传精讲
  • Python 开发环境全栈隔离架构:从 Anaconda 到 PyCharm 的四级防护体系
  • mcp-server-chart Quickstart
  • Android中Native向System Service进行Binder通信的示例
  • Tensorflow推理时遇见PTX错误,安装CUDA及CuDNN, 解决问题!
  • C++实现手写strlen函数
  • 什么是池化
  • 招聘公司怎么做网站/潍坊seo招聘
  • 用什么软件上传网站/高中同步测控优化设计答案
  • 重庆网站建设公司 /网站注册域名
  • 做的网站有广告图片/优化排名 生客seo
  • 专业提供网站建设服务公司/广州百度竞价开户
  • 成都做小程序定制开发多少钱/成都网站搜索排名优化公司