Question

在我的flutter应用程序中，我使用FutureBuilder运行Future，但是它会阻塞主UI线程。这是我正在使用的代码：

FutureBuilder(
  future: trace(),
  builder: (BuildContext context, AsyncSnapshot snapshot) {
    if (snapshot.connectionState == ConnectionState.done)
     return ma;
    else
     return Center(child: CircularProgressIndicator());
  },
)

Future<void> trace() async {
  List<int> bytes = await widget.image.readAsBytes();
  img.Image imagee = img.decodeImage(bytes);
  var svg = potrace(imagee);
  ma = SvgPicture.string(svg);
}

编辑：使用该代码，在处理图像时，CircularProgressIndicator会卡住，但是当我将功能更改为此时，进度指示器会正常旋转5秒钟。

Future<void> trace() async {
  await Future.delayed(Duration(seconds: 5));
}

解决方案：

img.Image imagee = await compute(img.decodeImage, bytes);

Answer 1

尝试通过网络调用http.get（）请求获取图像文件，并在Container小部件上执行基本转换。您会注意到它不会阻塞主线程。

Answer 2

尝试使用计算或隔离进行后台处理，而不是在主线程中进行处理

为什么Future会阻塞主线程？

2 个答案: