dart 在Flutter后台加载页面

tzxcd3kk  于 2022-12-28  发布在  Flutter
关注(0)|答案(3)|浏览(174)

我每分钟都需要在Flutter的一个全局变量中加载一些数据。要将数据(列表)加载到我的全局数据中,我需要打开另一个页面。但是我如何在后台打开那个页面呢?因为我不需要那个页面,我只想从中获取一些数据。

wb1gzix0

wb1gzix01#

创建一个不同的类,并编写一个从自身示例化列表的函数

mrphzbgm

mrphzbgm2#

加载页面是与UI或表示层相关的,但加载数据是与业务层相关的,您需要将它们彼此分开
有一个主题称为状态管理,您应该将数据提供程序集中到一个单独的图层,并根据数据的状态更改表示图层
首先看一下this link,这是一个使用Provider模式管理数据的不同状态的示例
然后,您可以使用一些更复杂的库(如BLOC library)进行状态管理

oknrviil

oknrviil3#

(More解决方案)
正如我所写的here,一个选项是使用Stack小部件作为页面加载器,每个“页面”在整个屏幕上展开。
当你想显示下一个“页面”时,用SizedBox替换stack中的前一层。
所以所有的元素实际上都是同时randerd的,但不会是可见的。例如,即使用户在“第一页”上,“第二页”上的视频也会开始加载,并在用户继续时为用户准备好。
一种方法是使用get作为状态管理。

import 'package:flutter/material.dart';
import 'package:get/get.dart';

class PageWithLayers extends StatelessWidget {
  const PageWithLayers({super.key});

  @override
  Widget build(BuildContext context) {
    final TestController c = Get.put(TestController());

    return Stack(
      children: [
        Container(
          color: Colors.red,
          child: FutureBuilder<Widget>(
            future: Future(() async {
              await Future.delayed(const Duration(seconds: 4));
              return const Text('Done loading in the background');
            }),
            builder: (BuildContext context, AsyncSnapshot<Widget> snapshot) {
              if (snapshot.hasData) {
                return snapshot.requireData;
              }
              return const Text('Loading Video');
            },
          ),
        ),
        Obx(
          () => c.toShowTopLayer > 0
              ? Container(
                  color: Colors.blue,
                  width: double.infinity,
                  height: double.infinity,
                  child: Center(
                    child: TextButton(
                      onPressed: c.removeTopLayer,
                      child: const Text('Next'),
                    ),
                  ),
                )
              : const SizedBox(),
        ),
      ],
    );
  }
}

class TestController extends GetxController {
  var toShowTopLayer = 1.obs;

  removeTopLayer() => toShowTopLayer--;
}

相关问题