Flutter打开pdf,Flutter打开现有工程

Flutter——pdf阅读功能的实现

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

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

首先导入插件部分源码

插件所提供的示例，已经满足了最基本的图片放大、横屏阅读的功能，我们工作的难点就在于pdf竖屏阅读的实现，所以我们需要解决的问题主要有以下几点：

（1） 横屏加载同一页面不能重复流量加载

（2） 切换竖屏时加载速度不能过慢，页面不能有断层

（3） 横竖屏切换时页码的定位保持

针对于上述问题，我们一一进行解决。

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

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

（在这里不对此组件过多介绍，后续会专门介绍此组件的使用），这样我们就可以实现预加载的功能了。

横竖屏切换定位 ，这个点的解决思路已经在我的 （Flutter 初始化ListView定位子组件位置） 中进行了介绍，实现了解决。

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

相关问答

Q1: PDF文件生成

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，不用手动画表格，还支持自动分页，非常友好。

Q2: Flutter PDF阅读，可显示页数，源码

添加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);

  }

}

Q3: Flutter真香，我用它写了个桌面版JSON解析工具

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。这样我们就可以访问任意路径了。当然关闭应用的沙盒也就相当于关闭了应用的防护机制，因此这个选项慎用。

原文地址：