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

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

成都創(chuàng)新互聯(lián)專業(yè)IDC數(shù)據(jù)服務(wù)器托管提供商，專業(yè)提供成都服務(wù)器托管，服務(wù)器租用，成都服務(wù)器托管，成都服務(wù)器托管，成都多線服務(wù)器托管等服務(wù)器托管服務(wù)。

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

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

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

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

（2） 切換豎屏時加載速度不能過慢，頁面不能有斷層

（3） 橫豎屏切換時頁碼的定位保持

針對于上述問題，我們一一進行解決。

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

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

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

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

至此，我們就解決了所有的難點問題。

Flutter Boost 接入實踐（iOS 篇）

本文將簡單梳理一下 iOS 工程接入的 Flutter Boost 的流程，以作為前文的補充。

flutter_application_path = '../flutter_module'

load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')

target 'FlutterHybridiOS' do

install_all_flutter_pods(flutter_application_path)

end

接著在工程根目錄下運行 pod install ，即可集成上 Flutter Module。看到我們的 Pods 中多了以下幾個模塊，即說明集成成功。

接著在工程根目錄下運行 pod install ，即可集成上 Flutter Module。看到我們的 Pods 中多了以下幾個模塊，即說明集成成功。

這一塊直接參照 Flutter Boost 官方提供的 example 就好了：

PlatformRouterImp.h：

PlatformRouterImp.m：

可以看到，F(xiàn)lutter Boost 支持常規(guī) push，也支持打開模態(tài)彈窗，也支持手動 pop。

AppDelegate.h：

AppDelegate.m：

同樣的，這里可在 Native 端用兩種不同的方式去打開我們在 Flutter Module 中注冊好的路由名。

至此，我們成功在 iOS 工程中接入了 Flutter Boost，那就開啟我們的混編之旅吧~

Flutter實踐--屏幕適配

做移動端開發(fā)的小伙伴都知道，針對不同型號和尺寸的手機要進行頁面適配，且Android和iOS適配方案各不相同，那flutter端如何進行適配呢？以下為近期flutter開發(fā)過程中關(guān)于適配的一些學習和記錄~~~~

說到flutter屏幕適配，就不得不提到插件 flutter_screenutil ，提到flutter_screenutil就不得不說以下幾點????

默認寬1080px

默認高1920px

allowFontScaling為false，即不跟隨系統(tǒng)字體大小設(shè)置變化

初始化單位為px

需要把context傳進去，因為內(nèi)部是通過 MediaQuery 來獲取屏幕尺寸等相關(guān)信息的

無需再傳context，因為內(nèi)部是通過單例 window 來獲取屏幕尺寸等相關(guān)信息的

作為iOS開發(fā)，之前都是以pt為參照進行比例適配的，且架構(gòu)組已經(jīng)定義了一套適配相關(guān)常量，傳px進去不太方便，所以需要對flutter_screenutil進行擴展

公司設(shè)計圖是以iPhone X的尺寸提供的即物理設(shè)備尺寸為375x812，像素比例為750x1624,像素密度比為2

初始化仍用px來初始化

dart sdk 2.7正式支持 extension-method ，即為已有類擴展方法，從 flutter_screenutil 這種 540.w 寫法點進去，我們可以看到

flutter_screenutil為num類擴展了一系列簡寫方法，那我們當然可以按照它這種方式進行擴展

網(wǎng)上提供的解決方案：

第一步：修改 pubspec.yaml

第二步：執(zhí)行 flutter pub get

第三步：重啟 AndroidStudio

解決方案：去掉const即可

UI設(shè)計中px、pt、ppi、dpi、dp、sp之間的關(guān)系

Dart/Flutter - 擴展方法(ExtensionMethod)

PDF文件生成

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

一個未經(jīng)修改的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方法，一個寫入文件的方法，一個導(dǎo)出data數(shù)據(jù)的方法

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

生成pdf并寫入到指定URL

生成pdf并返回Data

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

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

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

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

Flutter PDF閱讀，可顯示頁數(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)) {

//按下時的顏色

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

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

//默認狀態(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實踐pdf的簡單介紹
鏈接分享：http://chinadenli.net/article38/dsihosp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供營銷型網(wǎng)站建設(shè)、響應(yīng)式網(wǎng)站、面包屑導(dǎo)航、服務(wù)器托管、品牌網(wǎng)站制作、軟件開發(fā)

廣告

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