Flutter打開pdf,Flutter打開現(xiàn)有工程

Flutter——pdf閱讀功能的實(shí)現(xiàn)

實(shí)現(xiàn)pdf閱讀、橫豎屏切換，以及pdf頁(yè)面的點(diǎn)擊放大和雙指放大等功能

成都創(chuàng)新互聯(lián)公司長(zhǎng)期為上千家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為富順企業(yè)提供專業(yè)的做網(wǎng)站、網(wǎng)站設(shè)計(jì)，富順網(wǎng)站改版等技術(shù)服務(wù)。擁有10年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。

在這個(gè)項(xiàng)目中使用的是 flutter_plugin_pdf_viewer: ^1.0.7 ，可以滿足我們最基本的pdf需求閱讀需求。所做的滿足項(xiàng)目需求的工作主要是橫豎屏切換功能，以及我們的初始化繼續(xù)閱讀等等。

首先導(dǎo)入插件部分源碼

插件所提供的示例，已經(jīng)滿足了最基本的圖片放大、橫屏閱讀的功能，我們工作的難點(diǎn)就在于pdf豎屏閱讀的實(shí)現(xiàn)，所以我們需要解決的問(wèn)題主要有以下幾點(diǎn)：

（1） 橫屏加載同一頁(yè)面不能重復(fù)流量加載

（2） 切換豎屏?xí)r加載速度不能過(guò)慢，頁(yè)面不能有斷層

（3） 橫豎屏切換時(shí)頁(yè)碼的定位保持

針對(duì)于上述問(wèn)題，我們一一進(jìn)行解決。

重復(fù)流量加載 ，解決這一問(wèn)題比較簡(jiǎn)單，我們可以利用緩存實(shí)現(xiàn)，在每一次加載pdf頁(yè)時(shí)，存儲(chǔ)其(key,value)，這樣在下一次加載時(shí)我們會(huì)判斷這個(gè)頁(yè)面在緩存中是否已經(jīng)存在，不存在重新加載，存在則調(diào)用緩存中的數(shù)據(jù)，頁(yè)面銷毀時(shí)清除所有緩存即可。

切換橫豎屏 ，豎屏PDF閱讀的實(shí)現(xiàn)，思路就是將所有橫屏頁(yè)面存在list中，使用LIstView.builder()進(jìn)行繪制，這種方法存在的缺點(diǎn)就是太慢了，需要將所有頁(yè)面全部加載之后，才可以繪制頁(yè)面，用戶體驗(yàn)非常差，所以我們需要做一些改進(jìn)，為了提升加載速度，實(shí)現(xiàn)效果GIF中的效果，我們就要使用FutureBuilder()方法，來(lái)實(shí)現(xiàn)預(yù)加載功能，具體實(shí)現(xiàn)如下：

（在這里不對(duì)此組件過(guò)多介紹，后續(xù)會(huì)專門介紹此組件的使用），這樣我們就可以實(shí)現(xiàn)預(yù)加載的功能了。

橫豎屏切換定位 ，這個(gè)點(diǎn)的解決思路已經(jīng)在我的 （Flutter 初始化ListView定位子組件位置） 中進(jìn)行了介紹，實(shí)現(xiàn)了解決。

至此，我們就解決了所有的難點(diǎn)問(wèn)題。

PDF文件生成

PDF(Portable Document Format)是Adobe公司發(fā)明的一種文檔格式，由于其具有很多獨(dú)特的優(yōu)點(diǎn)而被廣泛使用。如pdf可內(nèi)嵌字體，這樣就可以避免客戶端沒有安裝字體而顯示不一致；如pdf的圖片和文字使用了矢量圖，這樣就可以隨意放大而不會(huì)失真；另外pdf的加密和防篡改也是一大亮點(diǎn)，是向外發(fā)布資料的首選格式

一個(gè)未經(jīng)修改的PDF文件從頭到尾主要包括4個(gè)部分，分別是：文件頭、對(duì)象集合、交叉引用表、文件尾。其中：

%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可以通過(guò)UIGraphicsPDFRenderer類生成PDF，其本身的api非常簡(jiǎn)單：一個(gè)init方法，一個(gè)寫入文件的方法，一個(gè)導(dǎo)出data數(shù)據(jù)的方法

用于構(gòu)造UIGraphicsPDFRenderer，第一個(gè)參數(shù)是pdf的尺寸，第二個(gè)參數(shù)可以設(shè)置pdf文件的元數(shù)據(jù)

生成pdf并寫入到指定URL

生成pdf并返回Data

繪制PDF主要依靠 UIGraphicsPDFRendererContext ，這是UIGraphicsRendererContext的子類，所以iOS是使用CoreGraphics的draw api進(jìn)行pdf繪制的

除了CoreGraphics的相關(guān)api之外，最重要的是 func beginPage() ，用于創(chuàng)建一頁(yè)pdf

安卓可以使用 PdfDocument 類生成PDF，和iOS類似，采用了系統(tǒng)的繪圖api( Canvas )，對(duì)于開發(fā)者來(lái)說(shuō)學(xué)習(xí)成本很低。但是安卓的坑比較多，建議采用iText、PDFBox等第三方實(shí)現(xiàn)。如drawText不支持多行文本，要通過(guò)較復(fù)雜的操作來(lái)實(shí)現(xiàn)；某些系統(tǒng)對(duì)文檔內(nèi)的圖片不進(jìn)行壓縮，導(dǎo)致生成的pdf比正常的大10多倍

flutter可以使用 pdf庫(kù) 生成pdf，該庫(kù)實(shí)現(xiàn)了一套自己的widgets，開發(fā)者可以像寫普通widgets一樣去寫pdf；另外還提供了table相關(guān)的api，不用手動(dòng)畫表格，還支持自動(dòng)分頁(yè)，非常友好。

Flutter PDF閱讀，可顯示頁(yè)數(shù)，源碼

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

//按下時(shí)的顏色

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? return Colors.transparent;

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }

//默認(rèn)狀態(tài)使用灰色

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 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真香，我用它寫了個(gè)桌面版JSON解析工具

Flutter支持穩(wěn)定的桌面設(shè)備開發(fā)已經(jīng)一段時(shí)間了，不得不說(shuō)，F(xiàn)lutter多平臺(tái)支持的特性真的很香。我本人并沒有任何桌面開發(fā)的經(jīng)驗(yàn)，但仍然使用Flutter開發(fā)出了一個(gè)桌面版小程序，功能很簡(jiǎn)單，就是對(duì)輸入的json做格式化處理和轉(zhuǎn)模型。

話不多說(shuō)，先來(lái)看看實(shí)際效果。 項(xiàng)目源碼地址

開發(fā)環(huán)境如下：

Flutter : 2.8.1

Dart : 2.15.1

IDE : VSCode

JSON作為我們?nèi)粘ｉ_發(fā)工作中經(jīng)常要打交道的一種數(shù)據(jù)格式，它共有6種數(shù)據(jù)類型： null , num , string , object , array , bool 。我們勢(shì)必對(duì)它又愛又恨。愛他因?yàn)樗鳛閿?shù)據(jù)處理的一種格式確實(shí)非常方便簡(jiǎn)潔。但是在我們做Flutter開發(fā)中，又需要接觸到j(luò)son解析時(shí)，就會(huì)感覺非常棘手，因?yàn)閒lutter沒有反射，導(dǎo)致json轉(zhuǎn)模型這塊需要手寫那繁雜的映射關(guān)系。就像下面這樣子。

數(shù)據(jù)量少還能接受，一旦量大，那么光手寫這個(gè)解析方法都能讓你懷疑人生。更何況手寫還有出錯(cuò)的可能。好在官方有個(gè)工具**json_serializable**可以自動(dòng)生成這塊轉(zhuǎn)換代碼，也解決了flutter界json轉(zhuǎn)模型的空缺。當(dāng)然，業(yè)界也有專門解析json的網(wǎng)站，可以自動(dòng)生成dart代碼，使用者在生成后復(fù)制進(jìn)項(xiàng)目中即可，也是非常方便的。

本項(xiàng)目以json解析為切入點(diǎn)，和大家一起來(lái)看下flutter是如何開發(fā)桌面應(yīng)用的。

要讓我們的flutter項(xiàng)目支持桌面設(shè)備。我們首先需要修改下flutter的設(shè)置。如下，讓我們的項(xiàng)目支持 windows 和 macos 系統(tǒng)。

接下來(lái)使用 flutter create 命令創(chuàng)建我們的模版工程。

創(chuàng)建完項(xiàng)目后，我們就可以 run 起來(lái)了。

先來(lái)看下整體界面，界面四塊，分別為功能模塊、文件選擇模塊、輸入模塊、輸出模塊。

我們?cè)谛陆ㄒ粋€(gè)桌面應(yīng)用時(shí)，默認(rèn)的模版又一個(gè)Appbar，此時(shí)應(yīng)用可以用鼠標(biāo)拖拽移動(dòng)，放大縮小，還可以縮到很小。但是，我們一旦去掉這個(gè)導(dǎo)航欄，那么窗口就不能用鼠標(biāo)拖動(dòng)了，并且我們往往不希望用戶將我們的窗口縮放的很小，這會(huì)導(dǎo)致頁(yè)面異常，一些重要信息都展示不全。因此這里需要借助第三方組件 bitsdojo_window 。通過(guò) bitsdojo_window ，我們可以實(shí)現(xiàn)窗口的定制化，拖動(dòng)，最小尺寸，最大尺寸，窗口邊框，窗口頂部放大、縮小、關(guān)閉的按鈕等。

通過(guò) InkWell 組件，可以捕捉到手勢(shì)、鼠標(biāo)、觸控筆的移動(dòng)和停留位置

這個(gè)功能是鼠標(biāo)移動(dòng)后的UI交互界面。要在窗口上顯示一個(gè)提示框，可以使用 Overlay 。需要注意的是，由于在 Overlay 上的 text 的根結(jié)點(diǎn)不是 Material 風(fēng)格的組件，因此會(huì)出現(xiàn)黃色的下劃線。因此一定要用 Material 包一下 text 。并且你必須給創(chuàng)建的 OverlayEntry 一個(gè)位置，否則它將全屏顯示。

讀取說(shuō)表拖拽的文件一開始想嘗試使用 InkWell 組件，但是這個(gè)組件無(wú)法識(shí)別拖拽中的鼠標(biāo)，并且也無(wú)法從中拿到文件信息。因此放棄。后來(lái)從文章《Flutter-2天寫個(gè)桌面端APP》中發(fā)現(xiàn)一個(gè)可讀取拖拽文件的組件 desktop_drop ，能滿足要求。

使用開源組件 file_picker ，選完圖片后的操作和拖拽選擇圖片后的操作一致。

Textfield 如果要顯示富文本，那么需要自定義 TextEditingController 。并重寫 buildTextSpan 方法。

在做導(dǎo)出功能時(shí)遇到下列報(bào)錯(cuò)，保存提示為沒有權(quán)限訪問(wèn)對(duì)應(yīng)目錄下的文件。

通過(guò)Apple的開發(fā)文檔找到有關(guān)權(quán)限問(wèn)題的說(shuō)明。其中有個(gè)授權(quán)私鑰的key為 com.apple.security.files.downloads.read-write ，表示 對(duì)用戶的下載文件夾的讀/寫訪問(wèn)權(quán)限 。那么，使用Xcode打開Flutter項(xiàng)目中的mac應(yīng)用，修改工程目錄下的 DebugProfile.entitlements 文件，向 entitlements 文件中添加 com.apple.security.files.downloads.read-write ，并將值設(shè)置為YES，保存后重啟Flutter項(xiàng)目。發(fā)現(xiàn)已經(jīng)可以向下載目錄中讀寫文件了。

當(dāng)然，這是正常操作。還有個(gè)騷操作就是關(guān)閉系統(tǒng)的沙盒機(jī)制。將 entitlements 文件的 App Sandbox 設(shè)置為NO。這樣我們就可以訪問(wèn)任意路徑了。當(dāng)然關(guān)閉應(yīng)用的沙盒也就相當(dāng)于關(guān)閉了應(yīng)用的防護(hù)機(jī)制，因此這個(gè)選項(xiàng)慎用。

原文地址：

當(dāng)前標(biāo)題：Flutter打開pdf,Flutter打開現(xiàn)有工程
網(wǎng)頁(yè)地址：http://muchs.cn/article34/phjgpe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、網(wǎng)站排名、網(wǎng)站營(yíng)銷、標(biāo)簽優(yōu)化、電子商務(wù)、手機(jī)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)