Question

Future getImage() async {
 var image = await ImagePicker.pickImage(source: ImageSource.camera);
 setState(() {
   _image = image;
   print("IMG:" + _image.toString());
 });
 setPrefs() ;
}

Future setPrefs() async {
 _base64 = base64.encode(_image.readAsBytesSync());
 print(_base64);
 final prefs = await SharedPreferences.getInstance();
 prefs.setString(IMAGE_KEY, _base64);

}

readAsBytesSync（）方法在Android上运行良好，但在iOS中运行太慢。那么如何将这段代码移至新的后台线程？

Answer 1

由于 Flutter 是单线程的并运行一个事件循环（如 Node.js），因此您不必担心线程管理或产生后台线程。如果您正在执行 I/O 绑定工作，例如磁盘访问或网络调用，那么您可以安全地使用 async/await 并完成。另一方面，如果您需要进行计算密集型工作以保持 CPU 忙碌，您希望将其移至 Isolate 以避免阻塞事件循环。

对于 I/O 密集型工作，将函数声明为 async 函数，并在函数内的长时间运行任务上声明为 await：

loadData() async {
  String dataURL = "https://jsonplaceholder.typicode.com/posts";
  http.Response response = await http.get(dataURL);
  setState(() {
    widgets = jsonDecode(response.body);
  });
}

这就是您通常执行网络或数据库调用的方式，它们都是 I/O 操作。

隔离是独立的执行线程，不与主执行内存堆共享任何内存。这意味着您无法从主线程访问变量，也无法通过调用 setState() 来更新您的 UI。隔离正如其名，不能共享内存（例如以静态字段的形式）。

此处，dataLoader() 是在其自己的单独执行线程中运行的 Isolate。在隔离中，您可以执行更多 CPU 密集型处理（例如解析大 JSON），或执行计算密集型数学运算，例如加密或信号处理。

您可以运行下面的完整示例：

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:async';
import 'dart:isolate';

void main() {
  runApp(SampleApp());
}

class SampleApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Sample App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: SampleAppPage(),
    );
  }
}

class SampleAppPage extends StatefulWidget {
  SampleAppPage({Key key}) : super(key: key);

  @override
  _SampleAppPageState createState() => _SampleAppPageState();
}

class _SampleAppPageState extends State<SampleAppPage> {
  List widgets = [];

  @override
  void initState() {
    super.initState();
    loadData();
  }

  showLoadingDialog() {
    if (widgets.length == 0) {
      return true;
    }

    return false;
  }

  getBody() {
    if (showLoadingDialog()) {
      return getProgressDialog();
    } else {
      return getListView();
    }
  }

  getProgressDialog() {
    return Center(child: CircularProgressIndicator());
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Sample App"),
        ),
        body: getBody());
  }

  ListView getListView() => ListView.builder(
      itemCount: widgets.length,
      itemBuilder: (BuildContext context, int position) {
        return getRow(position);
      });

  Widget getRow(int i) {
    return Padding(
      padding: EdgeInsets.all(10.0),
      child: Text("Row ${widgets[i]["title"]}"),
    );
  }

  loadData() async {
    ReceivePort receivePort = ReceivePort();
    await Isolate.spawn(dataLoader, receivePort.sendPort);

    // The 'echo' isolate sends its SendPort as the first message
    SendPort sendPort = await receivePort.first;

    List msg = await sendReceive(
      sendPort,
      "https://jsonplaceholder.typicode.com/posts",
    );

    setState(() {
      widgets = msg;
    });
  }

// the entry point for the isolate
  static dataLoader(SendPort sendPort) async {
    // Open the ReceivePort for incoming messages.
    ReceivePort port = ReceivePort();

    // Notify any other isolates what port this isolate listens to.
    sendPort.send(port.sendPort);

    await for (var msg in port) {
      String data = msg[0];
      SendPort replyTo = msg[1];

      String dataURL = data;
      http.Response response = await http.get(dataURL);
      // Lots of JSON to parse
      replyTo.send(jsonDecode(response.body));
    }
  }

  Future sendReceive(SendPort port, msg) {
    ReceivePort response = ReceivePort();
    port.send([msg, response.sendPort]);
    return response.first;
  }
}

Answer 2

1。使用未来

您可以使用readAsBytes的异步版本。

所以代替：

final imageData = _image.readAsBytesSync();
_base64 = base64.encode(imageData);

您可能会：

final imageData = await _image.readAsBytes();
_base64 = base64.encode(imageData);

使用Isolate

在您的代码中，不一定是readAsBytes行很慢。它可能是图像的基本64位编码。如果是这样，您可以将整个计算放在单独的隔离区中。您可以使用一种方便的方法compute。

// This needs to be a global function
encodeImage(File imageFile) {
    return base64.encodeimageFile.readAsBytesSync());
}

Future setPrefs() async {
 _base64 = await compute(encodeImage, _image);
 print(_base64);
 final prefs = await SharedPreferences.getInstance();
 prefs.setString(IMAGE_KEY, _base64);
}

此外，值得一提的是SharedPreferences（对于Android，也称为iOS上的NSUserDefaults）旨在存储较小的用户设置。它不是为存储图像而设计的，它可能是几兆字节。最好将图像文件复制到应用程序的文档文件夹中，并仅将文件名存储在SharedPreferences中。

Flutter：如何在Dart中的后台线程上运行函数

2 个答案: