一、功能需求
实现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定位子组件位置）中进行了介绍，实现了解决。
至此，我们就解决了所有的难点问题。
