一、Islote

Dart 应用一般都是单线程运行的,这就可能导致一些隐藏问题,比如当你的数据处理时间特别长的时候,用户体验上可能就会出现问题。

Native 本身是可以进行多线程进行一些操作,Flutter 中封装了 Isolate 来进行线程调度

Isolate 在 native 开发使用的包是 import '_isolates_io.dart',在 web 开发中使用的是 _isolates_web

并且 Isolate 提供了 computed 方法,用于将数据与 callback 结合

/// Spawn an isolate, run `callback` on that isolate, passing it `message`, and
/// (eventually) return the value returned by `callback`.
final _ComputeImpl compute = _isolates.compute;

也就是说通过 compute 方法,可以将数据抛给一个方法去处理,并且在后台执行

compute(callback, data)

二、使用 Islote 处理网络请求的数据

1、http 请求数据

这里请求了 网易新闻的一个 json

http.Response response = await client.get(
      'https://3g.163.com/photocenter/api/list/0001/00AP0001,3R710001,4T8E0001/30/100.json');
print(response.body)

首先我们拿到了数据,如果这个时候直接处理,我们可能采用的方式是:

   Future<List<Photo>> _fetchPhotos(http.Client client) async {
     http.Response res =
         await client.get('https://3g.163.com/photocenter/api/list/0001/00AP0001,3R710001,4T8E0001/30/100.json');
     List list = json.decode(res.body);
     return list.map((item) {
       return Photo.fromJson(item);
     }).toList();
   }

上面这种方式明显是阻塞的,并且如果我们要渲染占位图,就需要使用 state 控制占位图的渲染

2、使用 compute 在后台处理数据

为了方便数据的处理,创建一个 callback 方法:

class Photo {
  final String thumbnailUrl;

  Photo({this.thumbnailUrl});

  factory Photo.fromJson(Map<String, dynamic> data) {
    return Photo(
      thumbnailUrl: data['tcover'] as String,
    );
  }
}

List<Photo> generatorPhoto(String body) {
  List list = json.decode(body);
  return list.map<Photo>((item) => Photo.fromJson(item)).toList();
}

上面代码中 Photo Class 用来处理单个图片,将数据抽出来

generatorPhoto 方法则是将网络请求 decode 之后,在遍历处理数据。

准备好 callback 之后,就可以将数据丢给 callback

Future<List<Photo>> _fetchPhotos(http.Client client) async {
  http.Response response = await client.get(
      'https://3g.163.com/photocenter/api/list/0001/00AP0001,3R710001,4T8E0001/30/100.json');
  return compute(generatorPhoto, response.body);
}

return compute(generatorPhoto, response.body); 会将 generatorPhoto 处理完的数据返回,当然 _fetchPhoto 这个方法依旧是异步的

3、异步渲染数据

上面处理之后, _fetchPhotos 返回的仍然是异步结果,在 Widget 中不能直接在 builder 渲染组件,需要通过异步渲染。

FutureBuilder 构造函数如下:

  const FutureBuilder({
    Key key,
    this.future,
    this.initialData,
    @required this.builder,
  }) 

this.future 的声明如下:

  /// The asynchronous computation to which this builder is currently connected,
  /// possibly null.
  ///
  /// If no future has yet completed, including in the case where [future] is
  /// null, the data provided to the [builder] will be set to [initialData].
  final Future<T> future;

future 是异步处理的结果,结果可能是 null,builder 是渲染 Widget 的处理逻辑

builder 接受两个参数,除了默认的 builder 会接收的 context 上下文数据外,还接收 snapshot 参数。

其中 future 的结果都是从 snapshot 中获取,snapshot 的类型其实是 AsyncSnapshot.

AsyncSnapshot 其实有几种状态,分别代表数据数据的进度:

  • AsyncSnapshot.ConnectionState.none
  • AsyncSnapshot.ConnectionState.waiting
  • AsyncSnapshot.ConnectionState.active
  • AsyncSnapshot.ConnectionState.done

AsyncSnapshot 本身提供了 hasDatahasError 两个属性快速判断是否有错误或者数据,提供了 errordata 快速获取数据或者错误信息。

因此 builder 中逻辑如下:

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<List<Photo>>(
      future: _fetchPhotos(http.Client()),
      builder: (context, snapshot) {
        if (snapshot.hasError) {
          print(snapshot.error);
        }
        if (snapshot.hasData) {
          return PhotoListView(list: snapshot.data);
        } else {
          return Center(child: CircularProgressIndicator());
        }
      },
    );
  }

首先通过 snapshot.hasError 判断是否有错误,如果存在错误,或者直接渲染错误页。

如果有数据,渲染真正的 Widget,否则渲染一个 loading UI

4、PhotoListView UI Widget

这个比较简单,就是一个 GridView:

class PhotoListView extends StatelessWidget {
  final List<Photo> list;

  PhotoListView({Key key, this.list}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
      ),
      itemCount: list.length,
      itemBuilder: (context, i) {
        return Image.network(list[i].thumbnailUrl);
      },
    );
  }
}

三、效果:

GIF.gif

四、完整代码

https://github.com/postbird/FlutterHelloWorldDemo/blob/master/demo1/lib/bak/main.52-Isolates-compute.dart