189 8069 5689
实现pdf阅读、横竖屏切换，以及pdf页面的点击放大和双指放大等功能
成都创新互联公司长期为上千家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为富顺企业提供专业的做网站、网站设计，富顺网站改版等技术服务。拥有10年丰富建站经验和众多成功案例,为您定制开发。
在这个项目中使用的是 flutter_plugin_pdf_viewer: ^1.0.7 ，可以满足我们最基本的pdf需求阅读需求。所做的满足项目需求的工作主要是横竖屏切换功能，以及我们的初始化继续阅读等等。
首先导入插件部分源码
插件所提供的示例，已经满足了最基本的图片放大、横屏阅读的功能，我们工作的难点就在于pdf竖屏阅读的实现，所以我们需要解决的问题主要有以下几点：
（1） 横屏加载同一页面不能重复流量加载
（2） 切换竖屏时加载速度不能过慢，页面不能有断层
（3） 横竖屏切换时页码的定位保持
针对于上述问题，我们一一进行解决。
重复流量加载 ，解决这一问题比较简单，我们可以利用缓存实现，在每一次加载pdf页时，存储其(key,value)，这样在下一次加载时我们会判断这个页面在缓存中是否已经存在，不存在重新加载，存在则调用缓存中的数据，页面销毁时清除所有缓存即可。
切换横竖屏 ，竖屏PDF阅读的实现，思路就是将所有横屏页面存在list中，使用LIstView.builder()进行绘制，这种方法存在的缺点就是太慢了，需要将所有页面全部加载之后，才可以绘制页面，用户体验非常差，所以我们需要做一些改进，为了提升加载速度，实现效果GIF中的效果，我们就要使用FutureBuilder()方法，来实现预加载功能，具体实现如下：
（在这里不对此组件过多介绍，后续会专门介绍此组件的使用），这样我们就可以实现预加载的功能了。
横竖屏切换定位 ，这个点的解决思路已经在我的 （Flutter 初始化ListView定位子组件位置） 中进行了介绍，实现了解决。
至此，我们就解决了所有的难点问题。
PDF(Portable Document Format)是Adobe公司发明的一种文档格式，由于其具有很多独特的优点而被广泛使用。如pdf可内嵌字体，这样就可以避免客户端没有安装字体而显示不一致；如pdf的图片和文字使用了矢量图，这样就可以随意放大而不会失真；另外pdf的加密和防篡改也是一大亮点，是向外发布资料的首选格式
一个未经修改的PDF文件从头到尾主要包括4个部分，分别是：文件头、对象集合、交叉引用表、文件尾。其中：
%PDF-1.4
1 0 obj
/Producer (Skia/PDF m92)
endobj
xref
0 83
0000000000 65535 f
0000000015 00000 n
0000010954 00000 n
trailer
/Size 83
/Root 11 0 R
/Info 1 0 R
startxref
50152
%%EOF
iOS可以通过UIGraphicsPDFRenderer类生成PDF，其本身的api非常简单：一个init方法，一个写入文件的方法，一个导出data数据的方法
用于构造UIGraphicsPDFRenderer，第一个参数是pdf的尺寸，第二个参数可以设置pdf文件的元数据
生成pdf并写入到指定URL
生成pdf并返回Data
绘制PDF主要依靠 UIGraphicsPDFRendererContext ，这是UIGraphicsRendererContext的子类，所以iOS是使用CoreGraphics的draw api进行pdf绘制的
除了CoreGraphics的相关api之外，最重要的是 func beginPage() ，用于创建一页pdf
安卓可以使用 PdfDocument 类生成PDF，和iOS类似，采用了系统的绘图api( Canvas )，对于开发者来说学习成本很低。但是安卓的坑比较多，建议采用iText、PDFBox等第三方实现。如drawText不支持多行文本，要通过较复杂的操作来实现；某些系统对文档内的图片不进行压缩，导致生成的pdf比正常的大10多倍
flutter可以使用 pdf库 生成pdf，该库实现了一套自己的widgets，开发者可以像写普通widgets一样去写pdf；另外还提供了table相关的api，不用手动画表格，还支持自动分页，非常友好。
添加flutter_pdfview: ^1.2.1 组件
class PDFScreenextends StatefulWidget {
final Stringurl;
final Stringpath;
final Stringtitle;
PDFScreen({Key key,this.url, this.path, this.title}) :super(key: key);
_PDFScreenStatecreateState() =_PDFScreenState();
}
class _PDFScreenStateextends Statewith WidgetsBindingObserver {
final Completer_controller =
Completer();
intpages =0;
intcurrentPage =0;
boolisReady =false;
StringerrorMessage ='';
@override
Widgetbuild(BuildContext context) {
return Scaffold(
appBar:AppBar(
elevation:0,
leading:new IconButton(
icon:Image.asset(
Utils.getImgPath('icon_back'),
width:18,
height:36,
),
onPressed: () {
Navigator.of(context).pop();
},
),
centerTitle:true,
title:Text(
widget.title,
style:TextStyle(fontSize:17.0),
),
),
body:Stack(
children: [
Positioned(
height: MediaQuery.of(context).size.height - (Utils.getHeightSize(80, context) *2),
width: MediaQuery.of(context).size.width,
child:PDFView(
filePath:widget.path,
enableSwipe:true,
swipeHorizontal:true,
autoSpacing:false,
pageFling:true,
pageSnap:true,
defaultPage:currentPage,
fitPolicy: FitPolicy.BOTH,
preventLinkNavigation:
false, // if set to true the link is handled in flutter
onRender: (_pages) {
setState(() {
pages = _pages;
isReady =true;
});
},
onError: (error) {
setState(() {
errorMessage = error.toString();
});
print(error.toString());
},
onPageError: (page, error) {
setState(() {
errorMessage ='$page: ${error.toString()}';
});
print('$page: ${error.toString()}');
},
onViewCreated: (PDFViewController pdfViewController) {
_controller.complete(pdfViewController);
},
onLinkHandler: (String uri) {
print('goto uri: $uri');
},
onPageChanged: (int page, int total) {
print('page change: $page/$total');
setState(() {
currentPage = page;
});
},
),
),
Positioned(
bottom:0,
height: Utils.getHeightSize(80, context),
width: MediaQuery.of(context).size.width,
child:Container(
// padding: EdgeInsets.only(left: 10.0, right: 10.0,top: 10.0,bottom: 10.0),
decoration:BoxDecoration(
color: Colors.white,
border:Border.all(color: AppColors.shadeGary),
boxShadow: [
//refer to :
BoxShadow(
color: AppColors.shadeGary,
offset:Offset(0.0, 0.0),
blurRadius:3.0,
spreadRadius:0.0),
],
),
child:Stack(
children: [
Row(
mainAxisSize: MainAxisSize.min,
children: [
Container(),
Expanded(child:SizedBox()),
Container(
height:42.0,
width: Utils.getWidthSize(90, context),
margin:EdgeInsets.only(right:20.0,bottom:5.0),
decoration:BoxDecoration(//边框线
borderRadius:BorderRadius.circular(21.0), //圆角
gradient:LinearGradient(
colors: [Color(0xFF5FD27A), Color(0xFF3FAF6F)],
),
),
child:TextButton(
style:ButtonStyle(
overlayColor: MaterialStateProperty.all(Colors.transparent),
foregroundColor: MaterialStateProperty.resolveWith(
(states) {
if (states.contains(MaterialState.pressed)) {
//按下时的颜色
return Colors.transparent;
}
//默认状态使用灰色
return Colors.transparent;
},
),
),
child:Text(
globalTranslations.text("msg_download"),
style:TextStyle(color: Colors.white),
),
onPressed: () {
launchPdfURL(widget.url);
},
),
),
],
),
],
),
)),
errorMessage.isEmpty
? !isReady
?Center(
child:CircularProgressIndicator(),
)
:Container()
:Center(
child:Text(errorMessage),
)
],
),
// floatingActionButton: FutureBuilder(
// future: _controller.future,
// builder: (context, AsyncSnapshot snapshot) {
// if (snapshot.hasData) {
// return FloatingActionButton.extended(
// label: Text("Go to ${pages ~/ 2}"),
// onPressed: () async {
// await snapshot.data.setPage(pages ~/ 2);
// },
// );
// }
//
// return Container();
// },
// ),
);
}
launchPdfURL(String url) {
launch(url);
}
}
Flutter支持稳定的桌面设备开发已经一段时间了，不得不说，Flutter多平台支持的特性真的很香。我本人并没有任何桌面开发的经验，但仍然使用Flutter开发出了一个桌面版小程序，功能很简单，就是对输入的json做格式化处理和转模型。
话不多说，先来看看实际效果。 项目源码地址
开发环境如下：
Flutter : 2.8.1
Dart : 2.15.1
IDE : VSCode
JSON作为我们日常开发工作中经常要打交道的一种数据格式，它共有6种数据类型： null , num , string , object , array , bool 。我们势必对它又爱又恨。爱他因为他作为数据处理的一种格式确实非常方便简洁。但是在我们做Flutter开发中，又需要接触到json解析时，就会感觉非常棘手，因为flutter没有反射，导致json转模型这块需要手写那繁杂的映射关系。就像下面这样子。
数据量少还能接受，一旦量大，那么光手写这个解析方法都能让你怀疑人生。更何况手写还有出错的可能。好在官方有个工具**json_serializable**可以自动生成这块转换代码，也解决了flutter界json转模型的空缺。当然，业界也有专门解析json的网站，可以自动生成dart代码，使用者在生成后复制进项目中即可，也是非常方便的。
本项目以json解析为切入点，和大家一起来看下flutter是如何开发桌面应用的。
要让我们的flutter项目支持桌面设备。我们首先需要修改下flutter的设置。如下，让我们的项目支持 windows 和 macos 系统。
接下来使用 flutter create 命令创建我们的模版工程。
创建完项目后，我们就可以 run 起来了。
先来看下整体界面，界面四块，分别为功能模块、文件选择模块、输入模块、输出模块。
我们在新建一个桌面应用时，默认的模版又一个Appbar，此时应用可以用鼠标拖拽移动，放大缩小，还可以缩到很小。但是，我们一旦去掉这个导航栏，那么窗口就不能用鼠标拖动了，并且我们往往不希望用户将我们的窗口缩放的很小，这会导致页面异常，一些重要信息都展示不全。因此这里需要借助第三方组件 bitsdojo_window 。通过 bitsdojo_window ，我们可以实现窗口的定制化，拖动，最小尺寸，最大尺寸，窗口边框，窗口顶部放大、缩小、关闭的按钮等。
通过 InkWell 组件，可以捕捉到手势、鼠标、触控笔的移动和停留位置
这个功能是鼠标移动后的UI交互界面。要在窗口上显示一个提示框，可以使用 Overlay 。需要注意的是，由于在 Overlay 上的 text 的根结点不是 Material 风格的组件，因此会出现黄色的下划线。因此一定要用 Material 包一下 text 。并且你必须给创建的 OverlayEntry 一个位置，否则它将全屏显示。
读取说表拖拽的文件一开始想尝试使用 InkWell 组件，但是这个组件无法识别拖拽中的鼠标，并且也无法从中拿到文件信息。因此放弃。后来从文章《Flutter-2天写个桌面端APP》中发现一个可读取拖拽文件的组件 desktop_drop ，能满足要求。
使用开源组件 file_picker ，选完图片后的操作和拖拽选择图片后的操作一致。
Textfield 如果要显示富文本，那么需要自定义 TextEditingController 。并重写 buildTextSpan 方法。
在做导出功能时遇到下列报错，保存提示为没有权限访问对应目录下的文件。
通过Apple的开发文档找到有关权限问题的说明。其中有个授权私钥的key为 com.apple.security.files.downloads.read-write ，表示 对用户的下载文件夹的读/写访问权限 。那么，使用Xcode打开Flutter项目中的mac应用，修改工程目录下的 DebugProfile.entitlements 文件，向 entitlements 文件中添加 com.apple.security.files.downloads.read-write ，并将值设置为YES，保存后重启Flutter项目。发现已经可以向下载目录中读写文件了。
当然，这是正常操作。还有个骚操作就是关闭系统的沙盒机制。将 entitlements 文件的 App Sandbox 设置为NO。这样我们就可以访问任意路径了。当然关闭应用的沙盒也就相当于关闭了应用的防护机制，因此这个选项慎用。
原文地址：