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

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

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

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

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

插件所提供的示例，已經(jīng)滿(mǎn)足了最基本的圖片放大、橫屏閱讀的功能，我們工作的難點(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è)面銷(xiāo)毀時(shí)清除所有緩存即可。

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

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

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

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

Flutter Boost 接入實(shí)踐（iOS 篇）

本文將簡(jiǎn)單梳理一下 iOS 工程接入的 Flutter Boost 的流程，以作為前文的補(bǔ)充。

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

接著在工程根目錄下運(yùn)行 pod install ，即可集成上 Flutter Module?？吹轿覀兊?Pods 中多了以下幾個(gè)模塊，即說(shuō)明集成成功。

接著在工程根目錄下運(yùn)行 pod install ，即可集成上 Flutter Module?？吹轿覀兊?Pods 中多了以下幾個(gè)模塊，即說(shuō)明集成成功。

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

PlatformRouterImp.h：

PlatformRouterImp.m：

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

AppDelegate.h：

AppDelegate.m：

同樣的，這里可在 Native 端用兩種不同的方式去打開(kāi)我們?cè)?Flutter Module 中注冊(cè)好的路由名。

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

Flutter實(shí)踐--屏幕適配

做移動(dòng)端開(kāi)發(fā)的小伙伴都知道，針對(duì)不同型號(hào)和尺寸的手機(jī)要進(jìn)行頁(yè)面適配，且Android和iOS適配方案各不相同，那flutter端如何進(jìn)行適配呢？以下為近期flutter開(kāi)發(fā)過(guò)程中關(guān)于適配的一些學(xué)習(xí)和記錄~~~~

說(shuō)到flutter屏幕適配，就不得不提到插件 flutter_screenutil ，提到flutter_screenutil就不得不說(shuō)以下幾點(diǎn)????

默認(rèn)寬1080px

默認(rèn)高1920px

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

初始化單位為px

需要把context傳進(jìn)去，因?yàn)閮?nèi)部是通過(guò) MediaQuery 來(lái)獲取屏幕尺寸等相關(guān)信息的

無(wú)需再傳context，因?yàn)閮?nèi)部是通過(guò)單例 window 來(lái)獲取屏幕尺寸等相關(guān)信息的

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

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

初始化仍用px來(lái)初始化

dart sdk 2.7正式支持 extension-method ，即為已有類(lèi)擴(kuò)展方法，從 flutter_screenutil 這種 540.w 寫(xiě)法點(diǎn)進(jìn)去，我們可以看到

flutter_screenutil為num類(lèi)擴(kuò)展了一系列簡(jiǎn)寫(xiě)方法，那我們當(dāng)然可以按照它這種方式進(jìn)行擴(kuò)展

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

第一步：修改 pubspec.yaml

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

第三步：重啟 AndroidStudio

解決方案：去掉const即可

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

Dart/Flutter - 擴(kuò)展方法(ExtensionMethod)

PDF文件生成

PDF(Portable Document Format)是Adobe公司發(fā)明的一種文檔格式，由于其具有很多獨(dú)特的優(yōu)點(diǎn)而被廣泛使用。如pdf可內(nèi)嵌字體，這樣就可以避免客戶(hù)端沒(mé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類(lèi)生成PDF，其本身的api非常簡(jiǎn)單：一個(gè)init方法，一個(gè)寫(xiě)入文件的方法，一個(gè)導(dǎo)出data數(shù)據(jù)的方法

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

生成pdf并寫(xiě)入到指定URL

生成pdf并返回Data

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

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

安卓可以使用 PdfDocument 類(lèi)生成PDF，和iOS類(lèi)似，采用了系統(tǒng)的繪圖api( Canvas )，對(duì)于開(kāi)發(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，開(kāi)發(fā)者可以像寫(xiě)普通widgets一樣去寫(xiě)pdf；另外還提供了table相關(guān)的api，不用手動(dòng)畫(huà)表格，還支持自動(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(//邊框線(xiàn)

? ? ? ? ? ? ? ? ? ? ? ? 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實(shí)踐pdf的簡(jiǎn)單介紹
鏈接分享：http://sd-ha.com/article38/dsihosp.html

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

廣告

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