Flutter——pdf阅读功能的实现

一、功能需求

实现pdf阅读、横竖屏切换，以及pdf页面的点击放大和双指放大等功能

二、结果展示

pdf.gif

三、实现步骤

1.插件导入

在这个项目中使用的是flutter_plugin_pdf_viewer: ^1.0.7，可以满足我们最基本的pdf需求阅读需求。所做的满足项目需求的工作主要是横竖屏切换功能，以及我们的初始化继续阅读等等。
首先导入插件部分源码

pdf.png

2.实现pdf阅读功能

插件所提供的示例，已经满足了最基本的图片放大、横屏阅读的功能，我们工作的难点就在于pdf竖屏阅读的实现，所以我们需要解决的问题主要有以下几点：
（1）横屏加载同一页面不能重复流量加载
（2）切换竖屏时加载速度不能过慢，页面不能有断层
（3）横竖屏切换时页码的定位保持
针对于上述问题，我们一一进行解决。

3.难点问题解决

重复流量加载，解决这一问题比较简单，我们可以利用缓存实现，在每一次加载pdf页时，存储其(key,value)，这样在下一次加载时我们会判断这个页面在缓存中是否已经存在，不存在重新加载，存在则调用缓存中的数据，页面销毁时清除所有缓存即可。

  Future<PDFPage> _loadFuture(int number) async {
    if (number >= 0 && number < _cache.length && _cache[number] != null) {
      return _cache[number];
    }
    var page = await widget.document.get(page: number + 1);
    _cache.putIfAbsent(number, () => page);
    return page;
  }

切换横竖屏，竖屏PDF阅读的实现，思路就是将所有横屏页面存在list中，使用LIstView.builder()进行绘制，这种方法存在的缺点就是太慢了，需要将所有页面全部加载之后，才可以绘制页面，用户体验非常差，所以我们需要做一些改进，为了提升加载速度，实现效果GIF中的效果，我们就要使用FutureBuilder()方法，来实现预加载功能，具体实现如下：

FutureBuilder(
                          future: _loadFuture(index),
                          builder: (BuildContext context,
                              AsyncSnapshot<PDFPage> snapshot) {
                            if (snapshot.hasError)
                              return Center(
                                child: Text('发生错误: ${snapshot.error}'),
                              );
                            switch (snapshot.connectionState) {
                              case ConnectionState.waiting:
                                return Column(
                                  children: <Widget>[
                                    Container(
                                      width: screenWidth,
                                      height: screenHeight - 110.px,
                                      child: Center(
                                        child: CircularProgressIndicator(),
                                      ),
                                    ),
                                    Container(
                                      alignment: Alignment.center,
                                      width: screenWidth,
                                      height: 20.px,
                                      color: Colors.black12,
                                      child: Text(
                                        "${index + 1}",
                                        style: TextStyle(
                                          fontSize: 16,
                                          fontWeight: FontWeight.bold,
                                          color: Colors.white,
                                        ),
                                      ),
                                    )
                                  ],
                                );
                              case ConnectionState.active:
                              case ConnectionState.done:
                                return Column(
                                  mainAxisSize: MainAxisSize.max,
                                  children: <Widget>[
                                    Expanded(
                                      child: ZoomableWidget(
                                          zoomSteps: 3,
                                          minScale: 1.0,
                                          panLimit: 1.0,
                                          maxScale: 1.0,
                                          child: snapshot.data),
                                    ),
                                    Container(
                                      alignment: Alignment.center,
                                      width: screenWidth,
                                      height: 20.px,
                                      color: Colors.black12,
                                      child: Text(
                                        "${index + 1}",
                                        style: TextStyle(
                                          fontSize: 16,
                                          fontWeight: FontWeight.bold,
                                          color: Colors.white,
                                        ),
                                      ),
                                    )
                                  ],
                                );
                              case ConnectionState.none:
                              default:
                                return Center(
                                  child: Text('请求失败'),
                                );
                            }
                            return null;
                          },
                        ),

（在这里不对此组件过多介绍，后续会专门介绍此组件的使用），这样我们就可以实现预加载的功能了。
横竖屏切换定位，这个点的解决思路已经在我的（Flutter 初始化ListView定位子组件位置）中进行了介绍，实现了解决。

至此，我们就解决了所有的难点问题。