image - 我可以在后台运行 "image.dart"函数吗

Question

我想在压缩所选图像时显示加载小部件。
我正在使用“image.dart”包来选择图像，使用 ImagePicker.GetImage()。
然后我想在压缩图像时显示加载小部件，并在完成时显示压缩图像。
我的代码基本上可以工作，我的加载小部件很酷(感谢 spinkit)，我可以选择任何图像，压缩它并显示新的图像，但是在图像被压缩时会有一个小卡住(2-3 秒)。
因此，我试图放置一个加载小部件，以免用户 panic 并点击 10 000 次以选择所需的图像，但我对异步代码并不完全满意。
这是我的代码:

import 'package:image/image.dart' as Img;

  @override
  Widget build(BuildContext context) {
    if (loading == true) {
      return LoadingScreen();
    } else {
      return Scaffold(
        backgroundColor: Colors.brown[300],
        body: Column(
          children: [
            SizedBox(
              height: 50,
            ),
            RaisedButton(
              child: Text('Select an image'),
              onPressed: () async {
                await getImage();
                // You can see here that I'm trying to trigger the loading widget
                setState(() {
                  loading = true;
                });
                compressImage();
                // And I want to disable the loading widget here, after the compression
                setState(() {
                  loading = false;
                });
              },
            ),
            SizedBox(
              height: 10,
            ),
            pickedImage != null ? printSelectedImage() : Center(child: Text('Please select an image')),
          ],
        ),
      );
    }
  }

getImage() async {
    pickedFile = await picker.getImage(source: ImageSource.gallery);
}

compressImage() async {
    Img.Image selectedImage = Img.decodeJpg(File(pickedFile.path).readAsBytesSync());
    if (selectedImage.width > selectedImage.height) {
      Img.Image compressedImage = Img.copyResize(selectedImage, width: 500);
      File(pickedFile.path).writeAsBytesSync(Img.encodePng(compressedImage));
    } else {
      Img.Image compressedImage = Img.copyResize(selectedImage, height: 500);
      File(pickedFile.path).writeAsBytesSync(Img.encodePng(compressedImage));
    }

    if (pickedFile.path != null) {
      setState(() {
        pickedImage = pickedFile.path;
      });
    }
  }

但是结果是一样的，压缩的时候屏幕还是卡在文件选择器里，然后直接显示压缩后的图片。
我两周前开始学习 dart/Flutter，所以我错过了 dart 语言的一些基本原则吗？我没有看到明显的东西吗？
谢谢阅读

Answer 1

做点什么async不会将它移动到一些神奇的背景线程中。 Dart 使用 isolates它们基本上是一个可以运行 dart 代码的执行上下文。 Flutter 有一个隔离来运行你的应用程序，如果你在其中做太多工作，你的应用程序会变慢或跳帧。
您可以创建其他隔离来进行计算和卸载工作，并通过来回传递带有原始内容的消息在隔离之间进行通信。 Flutter 的缺点是，其他隔离器无法访问 Flutter 插件，因此很多东西在那里不起作用。
有一些方法可以解决这个问题，但它们非常投入。
开始隔离的最简单方法是 compute(callback, message)功能。

Spawn an isolate, run callback on that isolate, passing it message, and
(eventually) return the value returned by callback.

我不确定 image/image.dart库使用插件或其他一些不可用的功能(例如 dart:ui)，您可以尝试将图像压缩卸载到回调中。如果失败并返回 MissingPluginException或类似的东西，那么它就行不通了。
请记住，您只能传递原始消息，因此您不能为 pickedFile 设置路径。 , 只有传递作为参数。
但是，对于您的问题，可能有更简单的解决方案。图像选择器接受最大宽度/高度和质量参数。但是，如果您需要将图像编码为 PNG，那么您需要自己创建一个复杂的解决方案。