如何让Flutter with GetX等待数据加载

d6kp6zgx  于 2022-12-14  发布在  Flutter
关注(0)|答案(2)|浏览(271)

我正在寻找一种最佳实践方法来实现在显示第一页之前等待我的应用初始化数据。
这个应用程序有一个主控制器,每个页面也有一个控制器。主控制器最初从服务器加载数据,在完成之前,我想显示一个启动页面(或者至少在打开实际的应用程序页面之前等待)
一个简单的解决方案是,页面等待主控制器初始化

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应用程序)从任何给定的页面开始,例如http://app.com/showtask/123。这意味着我必须在每个页面上放置等待全局控制器。
有没有什么方法可以让Get等待(并可能显示一个欢迎页面),直到GlobalController准备好,然后再转到路径中描述的页面?
我尝试在GetMaterialApp中添加一个WelcomePage,以阻止应用程序直接转到请求的url。然后,WelcomeController应该等待MainController,然后再进行重定向。但是,即使呈现了WelcomePage,应用程序仍然会自动转到url中请求的页面。

void main() {
  runApp(GetMaterialApp(
    home: WelcomePage(),
    ...
    ...
    ...
osh3o9ms

osh3o9ms1#

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

htrmnn0y2#

您可以在MaterialApp上使用builder方法来构建/显示所需的小部件。
使用GetX-您可以在等待数据加载时显示加载程序,如下所示:

Widget build(BuildContext context) {

 final MainController mainController = Get.find();
 final isInitialized = mainController.isInitialized().value;

 return GetMaterialApp(
   title: 'Example',
   debugShowCheckedModeBanner: false,
   theme: ...,
   initialRoute: '/',
   getPages: [...],
   builder: (context, child) => isInitialized
      ? Container(child: child) 
      : const Center(
               child: CircularProgressIndicator(color: Colors.blue),
        ),
  );
}

isInitialized变为真之前,上面的代码应显示蓝色加载程序。

相关问题