使用PageView预加载网络图像

Question

我目前正在开发阅读器，并PageView用于滑动图像页面。如何预加载下一页，以便用户可以滑到下一页而无需等待页面加载？我不想先下载所有页面，因为它将加载服务器并冻结我的应用程序。当用户在当前页面上浏览时，我只想下载下一页或两页。

这是我的代码的摘录。

PageController _controller;
ZoomableImage nextPage;

Widget _loadImage(int index) {
  ImageProvider image = new CachedNetworkImageProvider("https://example.com/${bookId}/${index+1}.jpg}");
  ZoomableImage zoomed = new ZoomableImage(
              image, 
              placeholder: new Center(
                child: CupertinoActivityIndicator(),
              ),
            );
    return zoomed;
  }

@override
Widget build(BuildContext context) {
  return new Scaffold(
    body: new Container(
      child: PageView.builder(
        physics: new AlwaysScrollableScrollPhysics(),
        controller: _controller,
        itemCount: book.numPages,
        itemBuilder: (BuildContext context, int index) {
          return index == 0 || index == 1 ? _loadImage(index) : nextPage;
        },
        onPageChanged: (int index) {
          nextPage = _loadImage(index+1);
        },
      ),
    ),
  );
}

谢谢！

Answer 1

简单的！刚设置allowImplicitScrolling: true, // in PageView.builder

Answer 2

我最终使用了包cached_network_imageFutureBuilder并CachedNetworkImageProvider从中预取了所有图像。这是我的解决方案：

PageController _controller;
ZoomableImage currPage, nextPage;

Future<List<CachedNetworkImageProvider>> _loadAllImages(Book book) async {
  List<CachedNetworkImageProvider> cachedImages = [];
  for(int i=0;i<book.numPages;i++) {
    var configuration = createLocalImageConfiguration(context);
    cachedImages.add(new CachedNetworkImageProvider("https://example.com/${bookId}/${index+1}.jpg}")..resolve(configuration));
  }
  return cachedImages;
}

FutureBuilder<List<CachedNetworkImageProvider>> _futurePages(Book book) {
  return new FutureBuilder(
    future: _loadAllImages(book),
    builder: (BuildContext context, AsyncSnapshot snapshot){
      if(snapshot.hasData) {
        return new Container(
          child: PageView.builder(
            physics: new AlwaysScrollableScrollPhysics(),
            controller: _controller,
            itemCount: snapshot.data.length,
            itemBuilder: (BuildContext context, int index) {
              ImageProvider image = snapshot.data[index];
              return new ZoomableImage(
                image, 
                placeholder: new Center(
                  child: CupertinoActivityIndicator(),
                ),
              );
            },
            onPageChanged: (int index) {},
          ),
        );
      } else if(!snapshot.hasData) return new Center(child: CupertinoActivityIndicator());
    },
  );
}

@override
Widget build(BuildContext context) {
  return new Scaffold(
    body: _futurePages(widget.book),
  );
}