首页 > 解决方案 > 如何使用 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(),
    ...
    ...
    ...

标签: flutterflutter-getx

解决方案


您可以使用名称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(),
   )
  }
}

推荐阅读