Flutter 加载图片资源太慢

Question

所以，我有一个屏幕，它在文本上方显示一个文本和一个图像，并在后台加载来自共享首选项的一些数据。

但是图像需要永远加载，当我删除获取共享首选项数据的调用时，图像加载非常快。有人知道我在这个电话中做错了吗？

这是代码:

class WelcomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    precacheImage(AssetImage(Images.tomato), context);
    _loadData(context);
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text(
              Strings.appName,
              style: TextStyle(
                color: AppColors.black,
                fontSize: 50.0,
                fontWeight: FontWeight.w600,
              ),
            ),
            Image.asset(Images.tomato),
          ],
        ),
      ),
    );
  }

  void _loadData(BuildContext context) async {
    final PreferencesRepository repository = PreferenceRepositoryImp();
    repository.loadAll().then(
      (_) {
        sleep(Duration(seconds: 2));
        Navigator.pushNamedAndRemoveUntil(context, Routes.HOME, (_) => false);
      },
    );
  }
}

这就是图像

Answer 1

您正在使用 sleep(Duration(seconds: 2));这停止了​​一切。你不应该使用 sleep ，尤其是在 build 里面方法。 Dart 是单线程的，这意味着当它停止线程时，它会阻止构建 UI。

还有，为什么是_loadData标记为 async如果您不使用 await关键词？只有在您打算使用 await 时才需要它。关键字，否则将其删除。如果你想使用它，你应该使用 await Future.delayed(Duration(seconds: 2))这让它等待。这里:

void _loadData(BuildContext context) async {
  final PreferencesRepository repository = PreferenceRepositoryImp();
  await repository.loadAll();
  await Future.delayed(Duration(seconds: 2));
  Navigator.pushNamedAndRemoveUntil(context, Routes.HOME, (_) => false);
}

怎么样 await不同于 sleep ?
await让 Dart 说“嘿，我以后会注意这个”(哈哈，明白了吗？ future ？哈哈哈哈哈哈哈我很有趣)。无论如何，它不会继续 _loadData函数，因为它需要该值，但它将继续运行(在您的示例中)构建方法，然后当 Future返回一个值，它会像“嘿!我一直在寻找那个值!现在我可以继续运行那个函数了!”
sleep另一方面，让 Dart 说“我要在我得到的时间内小睡一会儿”(在这种情况下是两秒钟)。由于 Dart 是单线程的，因此它在“唤醒”之前不会做任何事情。在它小睡两秒钟后，它将继续该功能，并在它完成后，构建方法将继续，因此，加载您的图像，这解释了为什么需要这么长时间。