flutter - 如何使用 StreamBuilder 执行不同值的网络请求
问题描述
我正在使用一个FutureBuilder
小部件来渲染Text
基于未来的值,counter
当我单击浮动操作按钮时,我再次使用不同的值调用未来。但是我需要setState
在单击按钮后执行一个操作以刷新 UI,这对于屏幕上的几个小部件来说很好,但调用setState
也会重建其他小部件。
class _MyHomePageState extends State<MyHomePage> {
Future counter;
@override
void initState() {
super.initState();
counter = counterFuture(4);
}
//This would be a network request with a specific value
Future<int> counterFuture(int i) async {
return await Future.value(i);
}
_changeCounter(int i) {
setState(() {
counter = counterFuture(i);
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Demo'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
FutureBuilder<int>(
future: counter,
builder: (context, snapshot) {
if (snapshot.hasData) {
return Text(snapshot.data.toString());
}
return Text('loading');
},
),
...other widgets
],
),
),
floatingActionButton: FloatingActionButton(
//tap button to request with a different value
onPressed: () => _changeCounter(9),
),
);
}
}
我的问题是如何使用 Streams 和 StreamBuilder 来仅渲染和更新Text
小部件来实现这一点?
解决方案
您可以使用 StreamController 轻松完成此操作。查看下面的代码片段:
class _MyHomePageState extends State<MyHomePage> {
int counter;
StreamController controller = StreamController<int>();
@override
void initState() {
initialize();
super.initState();
}
initialize() async {
counter = await counterFuture(4);
controller.add(counter);
}
@override
void dispose() {
controller.close();
super.dispose();
}
//This would be a network request with a specific value
Future<int> counterFuture(int i) async {
return await Future.value(i);
}
_changeCounter(int i) async {
counter = await counterFuture(i);
controller.add(counter);
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Demo'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
StreamBuilder<int>(
stream: controller.stream,
builder: (context, snapshot) {
if (snapshot.hasData) {
return Text(snapshot.data.toString());
}
return Text('loading');
},
),
],
),
),
floatingActionButton: FloatingActionButton(
//tap button to request with a different value
onPressed: () => _changeCounter(9)),
),
);
}
}
推荐阅读
- java - 映射如何嵌入休眠 sql 查询
- delphi - 再次显示表单时,RadioButtons 保存上次检查而不是所需的
- java - 为什么我的 java while 循环继续以真实状态打印?
- kendo-ui - 如何通过视图模型将 DropDownList 中的选定值传递给控制器的操作方法?
- intellij-idea - 如何从 IntelliJ IDEA v. 2019.3 中的单个测试运行中删除新选项“从上下文创建 testName 运行配置”?
- javascript - 本地时间网页上的 JavaScript 代码
- r - 根据 R 中另一列值的部分字符串匹配查找数据帧的子集
- c++ - 在 Ubuntu 上使用 Mingw-w64 进行交叉编译时包括库
- reactjs - react-admin,自定义reducer来操作state.admin中的数据
- mysql - 成功时的 Liquibase 前提条件 MARK_RAN