flutter - 如何使用 GetX 让 Flutter 等到数据加载完毕
问题描述
我正在寻找一种最佳实践方法来实现在显示第一页之前等待我的应用程序初始化数据。
该应用程序有一个主控制器以及每页一个控制器。主控制器最初从服务器加载数据,在完成之前我想显示一个启动页面(或者至少在打开实际的应用程序页面之前等待)
一个简单的解决方案是,页面等待主控制器初始化
class MainController extends GetxController {
final isInitialized = false.obs;
@override
void onInit() async {
Future f1 = server.get('service1').then(....)
Future f2 = server.get('service1').then(....)
Future f3 = server.get('service1').then(....)
await Future.wait([f1, f2, f3]);
isInitialized.value = true;
}
}
页面组件可以:
class HandleTaskPage extends GetView<HandleTaskPageController> {
@override
Widget build(BuildContext context) {
MainController mainController = Get.find();
return Obx(() {
if (mainController.isInitialized().value) {
return TaskPanelWidget();
} else {
return WaitingPage();
}
})
}
}
但是我的应用程序允许用户使用直接 url (web-app) 从任何给定页面开始,例如http://app.com/showtask/123 这意味着我必须在每个页面上等待全局控制器。
有什么方法可以让 Get 等待(并可能显示欢迎页面),直到 GlobalController 准备就绪,然后再转到路线中描述的页面?
我尝试向 GetMaterialApp 添加一个 WelcomePage,以阻止应用程序直接访问请求的 url。WelcomeController 应该在重定向之前等待 MainController。但是即使欢迎页面确实被渲染了,应用程序仍然会自动继续到 url 中请求的页面。
void main() {
runApp(GetMaterialApp(
home: WelcomePage(),
...
...
...
解决方案
您可以使用名称StateMixin来实现 mixin 。
示例(控制器):
class UserController extends GetxController with StateMixin {
getData() {
// make status to loading
change(null, status: RxStatus.loading());
// Code to get data
await service.getData()
// if done, change status to success
change(null, status: RxStatus.success());
}
}
示例(用户界面):
class HomePage extends GetView<UserController> {
@override
Widget build(BuildContext context) {
// controller from GetView
return controller.obx((state) {
return OtherWidget()
},
onLoading: CircularProgressIndicator(),
)
}
}
推荐阅读
- javascript - 将对象之间的值乘以索引
- javascript - 如何修复石头剪刀布蜥蜴 spock 程序的输出表?
- java - 如何在 Java 中自动创建自述文件,而不是从 Git 中心
- python - 在 python 上从 LabVIEW 读取 TDMS 文件这么慢?
- javascript - 预测在哪里?
- javascript - API Node.js + express,请求问题
- sql - 如果保存了 id,则从 SQL 表中获取字段的值成员
- reactjs - chrome中的ReactJS内存/存储泄漏
- reactjs - React 一次显示两个组件
- haskell - “.hamlet”文件中的^{...}是什么意思