asynchronous - Flutter 异步方法会降低应用程序性能

Question

我是 flutter 的新手，我不明白我可能做错了什么。在我的应用程序中，用户可以选择更改其头像的图像。他可以从图库中选择图像或拍照。新的头像图像保存在 _avatarImage 字段中，并在 setState 方法中将 _newImage 字段设置为 true，如下所示:

Future getNewAvatarImage() async {
   Image _image = .... // Take a photo or a image from Gallery
   // ...
   _avatarImage = _image;
   setState(
     () => _newImage = true;
   );
 }

在代码的一部分中，我有 compressAndUpload 方法，该方法在调用时会压缩图像并将其发送到远程服务器。此方法是异步的，只要 _newImage 字段为 true，就会在 build 方法 中调用。像这样

@override
Widget build(BuildContext context) {
    if (_newImage) {
       _newImage = false;
       compressAndUpload(_avatarImage);
    }
    return Container(
       //...
       child: _avatarImage,
       //
    );

问题在于，如果调用compressAndUpload方法，新的头像图像将需要很长时间才能出现。如果将此方法注释掉，新的头像图像会很快出现。

    if (_newImage) {
       _newImage = false;
       // New image show quickly
       // compressAndUpload(_avatarImage);
    }

    ***********

    if (_newImage) {
       _newImage = false;
       // Image takes too long to appear
       compressAndUpload(_avatarImage);
    }

问题出在哪里？ compressAndUpload 方法是异步的，因此不会导致新图像的显示延迟:

 Future<void> compressAndUpload(var image) async {
    // Compress image
    // upload image
 }

更新:

为了进一步说明，我展示了 compressAndUpload 方法的完整代码:

 Future<void> compressAndUpload(var image) async {

  var imageBytes = imagem.readAsBytesSync();

  saveImageToPreferences(base64String(imageBytes));

  var tempDir = await getTemporaryDirectory();
  var path = tempDir.path;

  // Reduce size
  img.Image image = img.decodeImage(imageBytes);
  img.Image smallerImage = img.copyResize(image, width: 1000);

  File compressedFileImage =  

  File('$path\${Explika.getAluno().id}.jpg')
   ..writeAsBytesSync(img.encodeJpg(smallerImage, quality: 50));

  String _urlsegment =  Explika.producaoFlag ? 
  'https://www.remoteserver.pt' : 'http://10.0.2.2';

  var stream = http.ByteStream(DelegatingStream.typed(
               compressedFileImage.openRead()));
  var length = await compressedFileImage.length();
  var uri = Uri.parse('$_urlsegment/explika/api/upload');

  var request = http.MultipartRequest("POST", uri);

  var multipartFile = http.MultipartFile('fotoaluno', stream, length,
      filename: '${Explika.getAluno().id}.jpg');

  request.files.add(multipartFile);

  var response;
  try {
    response = await request.send();
  } catch (e) {
    // mostrar falha de rede
    //_uploadingImagem = false;
    print(e);
    return;
  }

  //Get the response from the server
  var responseData = await response.stream.toBytes();
  var responseString = String.fromCharCodes(responseData);
  print(responseString);

}

Answer 1

非常感谢大家的评论。

当我发现在pickImage方法中可以设置所选图像的最大宽度和最大高度时，问题就解决了。因此，不需要对所选图像进行压缩步骤。