flutter - 消费者提供者似乎没有通知听众?
问题描述
下面的最小可重现代码旨在在按下按钮时有一个加载图标(以模拟发生异步计算时的加载)。
出于某种原因,Consumer Provider 在回调期间不会重建小部件。
我的观点:
class HomeView extends StatefulWidget {
const HomeView();
@override
_HomeViewState createState() => _HomeViewState();
}
class _HomeViewState extends State<HomeView> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: ChangeNotifierProvider(
create: (_) => HomeViewModel(99),
child: Consumer<HomeViewModel>(
builder: (_, myModel, __) => Center(
child: ButtonsAtBottom(
addEventAction: () => myModel.increment(context),
busy: myModel.busy
),
),
),
),
);
}
}
我模拟执行业务逻辑的模型:
class HomeViewModel extends LoadableModel {
late int integer;
HomeViewModel(this.integer);
void increment(BuildContext context) {
super.setBusy(true);
Future.delayed(Duration(seconds: 3), () => print(integer++));
super.setBusy(false);
//Passed in context just to try to simulate my real app
//print(context);
}
}
class LoadableModel extends ChangeNotifier {
bool _busy = false;
bool get busy => _busy;
void setBusy(bool value) {
_busy = value;
notifyListeners();
}
}
问题:当回调执行并执行其中的setBusy()
方法时,它们应该通知侦听器并更新其中busy
传递的字段。随后,应显示文本或加载程序。
但是,busy
字段永远不会更新并保持为false
.
class ButtonsAtBottom extends StatelessWidget {
final bool busy;
final void Function() addEventAction;
const ButtonsAtBottom({required this.busy, required this.addEventAction});
@override
Widget build(BuildContext context) {
print("busy value: $busy");
return Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
IconButton(
onPressed: () => Navigator.pop(context),
icon: Icon(Icons.clear_rounded),
),
ElevatedButton.icon(
onPressed: addEventAction,
icon: Icon(Icons.save_alt_rounded),
label: busy
? CircularProgressIndicator.adaptive(
backgroundColor: Colors.white,
)
: Text("Save")),
],
);
}
}
解决方案
你尝试过等待未来吗?
推荐阅读
- javascript - 我如何做到这一点,如果你按下一个按钮,然后再按下一个不同的按钮,你会在屏幕上看到一些东西?
- azure - Connect-MsolService 非交互式
- javascript - 有没有办法在传单地图中添加文字?
- typescript - Typescript/xstate:将对象拆分为可区分的联合
- javascript - 使用 ReactDOM.createPortal() 制作模式 - 目标容器不是 DOM 元素错误
- jenkins - 如何通过 Jenkins 脚本控制台中的 groovy 脚本打印 AmazonEC2 Slave 详细信息
- react-native - React-Native 包:通过 HTTP/RSTP (.mjpg .amp) 流式传输
- c++ - 将事件绑定到自定义 wxButton
- c# - AWS SDK (C#) - 它如何创建描述实例请求以过滤掉具有特定标签键的虚拟机
- php - 请我想在 Laravel 8 中使用不同的表实现多个注册和登录,所有用户表单都在同一页面中(切换按钮)