[Android Flutter] 填坑：awaitforEachImage.file三者结合的奇妙巨坑

Posted 2022-07-01 小陈乱敲代码

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了[Android Flutter] 填坑：awaitforEachImage.file三者结合的奇妙巨坑相关的知识，希望对你有一定的参考价值。

前言

问题是这样出现的，一个实时聊天app，在性能较差的手机上，一次性发送多张图片，Image.file组件加载居然有明显的延迟！

具体表现为先出现一个空白区域，然后图片才会在空白区域慢慢渲染出来

而且我寻遍百度谷歌都没有人遇到相同的问题，难道这个bug只有我遇到了？

首先来看下面两段代码：

分别在forEach循环和for循环中执行await会有什么区别呢？

代码1(forEach)：

import 'dart:async';
import 'dart:io';

void main() async 
  Completer<int> completer;
  print('main begin');
  [1, 2, 3, 4, 5, 6, 7, 8, 9, 10].forEach((element) async 
    var t = await test(element);
    print('t:$t,index:$element');
  );
  print('main end');


Future<int> test(int i) async 
  print('test-$i begin');
  await sleep(Duration(seconds: 1));
  print('test-$i end');
  return 1;

输出：

main begin
test-1 begin
test-2 begin
test-3 begin
test-4 begin
test-5 begin
test-6 begin
test-7 begin
test-8 begin
test-9 begin
test-10 begin
main end
test-1 end
t:1,index:1
test-2 end
t:1,index:2
test-3 end
t:1,index:3
test-4 end
t:1,index:4
test-5 end
t:1,index:5
test-6 end
t:1,index:6
test-7 end
t:1,index:7
test-8 end
t:1,index:8
test-9 end
t:1,index:9
test-10 end
t:1,index:10

代码2(for)：

import 'dart:async';
import 'dart:io';

void main() async 
  Completer<int> completer;
  print('main begin');
  for (int i = 1; i < 11; i++) 
    var t = await test();
    print('t:$t,index:$i');
  
  print('main end');


Future<int> test(int i) async 
  print('test-$i begin');
  // Future.delayed(Duration(seconds: 3), () 
  //   print('after 3s');
  // );
  await sleep(Duration(seconds: 1));
  print('test-$i end');
  return 1;

输出：

main begin
test begin
test end
t:1,index:1
test begin
test end
t:1,index:2
test begin
test end
t:1,index:3
test begin
test end
t:1,index:4
test begin
test end
t:1,index:5
test begin
test end
t:1,index:6
test begin
test end
t:1,index:7
test begin
test end
t:1,index:8
test begin
test end
t:1,index:9
test begin
test end
t:1,index:10
main end

看到结果了吗！？

await在forEach中不会等待！！！

那么这和Image.file又有什么关系呢？

这就要从我处理的项目说起了，

实时聊天app，在相册选取图片时最多可以选择九张，返回之后在forEach中：

result.forEach((e)
    var message = e as Message;
    await sendMessage(message)


void sendMessage(msg)
    awiat db.insert(msg) /// 消息插入数据库
    messageList.add(msg) /// 消息塞入消息队列,这一步结束后渲染Image.file

图片消息进入数据队列后会自动渲染成Image.file

现在我们知道forEach中不会等待await

所以它会连续执行九次sendMessage() 而在sendMessage里面又会正常等待

awiat db.insert(msg) /// 消息插入数据库

等待完成后开始渲染图片 messageList.add(msg) /// 消息塞入消息队列,这一步结束后渲染Image.file

这样第一张图片的消息入库、塞入消息队列后，开始渲染第一张图片

此时后面八张图片还在入库！！！所以Image.file()组件渲染就会卡顿！！！

就会出现令我百思不得其解的现象：Image.file()加载图片为什么这么慢！！！

但是现在我们知道了forEach中awiat不会等待，那把forEach换成for循环不就好了？

可惜还是不行

因为Image.file加载也是需要耗时的，这样第一张图片的Image.file渲染时，会同步执行第二张图片的awiat db.insert(msg) /// 消息插入数据库

虽然这样Image.file组件加载会比forEach的情况有所好转（至少不是与后续八张图片的入库同时进行）