如何在导航到下一个屏幕之前让启动屏幕等待计算？

Question

我在颤振上制作启动画面，我想在显示启动画面时运行一些计算（循环进度指示器正在运行），在所有计算完成后我想运行 Navigator.push() 来导航到主屏幕。问题是颤振永远不会等待计算，我所做的解决方法是在我的导航器中添加一个 future.delayed() 并等待任意时间，直到所有计算完成。

代码是这样的：（计算是正在加载的模型）

class SplashScreen extends StatefulWidget {
  @override
  _SplashScreenState createState() => _SplashScreenState();
}

class _SplashScreenState extends State<SplashScreen> {
  @override
  void initState() {
    super.initState();
    SchedulerBinding.instance.addPostFrameCallback((_) {
      // Do all of this
      final bestModel = Provider.of<BestSellingModel>(context, listen: false);
      final salesModel = Provider.of<SalesModel>(context, listen: false);
      final categoryModel = Provider.of<CategoryModel>(context, listen: false);
      if (bestModel.isLoading) bestModel.getBestSelling();
      if (salesModel.isLoading) salesModel.getSales();
      if (categoryModel.isLoading) categoryModel.getCategories();
      DatabaseHelper.instance.database;
      // And only then navigate to next screen without a pre-established time
      Future.delayed(Duration(seconds: 12), () {
        Navigator.of(context).pushReplacement(
            MaterialPageRoute(builder: (BuildContext context) => MainTabs()));
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    Size screenSize = MediaQuery.of(context).size;

    return Scaffold(
      body: Stack(
        fit: StackFit.expand,
        children: <Widget>[
          Container(
            decoration: BoxDecoration(
              gradient: LinearGradient(
                begin: Alignment.topRight,
                end: Alignment.bottomLeft,
                colors: [Color(0xffFBC707), Color(0xffF25D19)],
              ),
            ),
          ),
          Column(
            mainAxisAlignment: MainAxisAlignment.start,
            children: <Widget>[
              Expanded(
                flex: 2,
                child: Container(
                  width: screenSize.width / 1.8,
                  child: Image.asset('assets/images/splash_logo.png'),
                ),
              ),
              Expanded(
                flex: 1,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    // This needs to keep running while the models are being loaded
                    SizedBox(
                      child: CircularProgressIndicator(),
                      height: 64.0,
                      width: 64.0,
                    ),
                  ],
                ),
              )
            ],
          )
        ],
      ),
    );
  }
}

这是我使用的模型示例：

class SalesModel with ChangeNotifier{
  List<Product> products = [];
  bool isLoading = true;

  Future getSales() async {
    products = await WooCommerce().getProductsByCategory(categoryId: 58);
    isLoading = false;
    notifyListeners();
  }
}

那么，有没有办法让启动屏幕的圆形进度指示器在模型加载的同时运行，并在所有模型加载后导航到主屏幕？

Answer 1

我对登录状态做了类似的事情。 我的启动画面会监听登录状态流。

  void setInProgress(bool value) {
    setState(() {
     _inProgress = value;
    });
  } // of setInProgress

在你的构建方法中，你可以添加条件

      if (_inProgress)
        Center(
          child: CircularProgressIndicator(),
        )
      if (!_inProgress)
        Center(

          child: HomeScreenWidget(),
        )

每次我这样做时，我认为我真的应该将它封装在一个小部件中。 此外，计算状态不仅仅是一个布尔值，您可以使用 StreamBuilder 来侦听计算状态流。