使用Syncfusion PDF查看器打开PDF文件时出现性能滞后

Question

我正在使用"Syncfusion PDF查看器"在android中打开PDF文件。我使用"Dio"one_answers"Path_provider"下载并保存第一次打开的文件，这样就可以在没有互联网的情况下从本地存储打开它。我面临的问题是，当我试图从本地存储打开PDF文件时(在它已经下载并保存之后(，在页面转换中面临性能滞后。我在这里分享完整的代码，期待着对我在实现中是否犯了任何错误提出建议。

main.dart文件

import 'package:flutter/material.dart';
import 'book.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'title',
theme: ThemeData(
primarySwatch: Colors.cyan,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
void dispose() {
super.dispose();
}
@override
Widget build(BuildContext context) {
List bookindex = [
Books(subject: '১ম - ৩য় খন্ড', subtitle: 'সূরা ফাতিহা - সূরা বাকারা'),
Books(
subject: '৪র্থ - ৭ম খন্ড', subtitle: 'সূরা আল-ইমরান - সূরা মায়িদাহ'),
Books(subject: '৮ম - ১১শ খন্ড', subtitle: 'সূরা আন'আম - সূরা ইউনুস'),
Books(subject: '১২শ - ১৩শ খন্ড', subtitle: 'সূরা হূদ - সূরা ইসরা'),
];
return Scaffold(
appBar: AppBar(
title: Text(
'Book List',
style: TextStyle(
//fontSize: 14,
fontFamily: 'Baloo Da',
),
),
centerTitle: true,
),
body: ListView.builder(
itemCount: bookindex.length,
itemBuilder: (context, index) {
return Card(
child: ListTile(
title: Text(
bookindex[index].subject,
style: TextStyle(
fontSize: 14,
fontFamily: 'HindSiliguri',
),
),
subtitle: Text(
bookindex[index].subtitle,
style: TextStyle(
fontSize: 12,
fontFamily: 'HindSiliguri',
),
),
trailing: Icon(Icons.arrow_forward),
onTap: () {
Navigator.push(context,
MaterialPageRoute(builder: (context) => Book(index)));
},
),
);
},
),
bottomNavigationBar: BottomAppBar(
child: Container(
height: 85.0,
),
),
);
}
}
class Books {
String subject;
String subtitle;
String booklink;
Books({this.subject, this.subtitle, this.booklink});
}

book.dart文件

import 'dart:io';
import 'package:dio/dio.dart';
import 'package:flutter/material.dart';
import 'package:path_provider/path_provider.dart';
import 'package:syncfusion_flutter_pdfviewer/pdfviewer.dart';
class Book extends StatefulWidget {
final int index;
Book(this.index);
@override
_BookState createState() => _BookState();
}
class _BookState extends State<Book> {
Directory tempDir;
String tempPath;
List booklist = [
'https://rongdhonustudio.com/islamic_books/Tafsir_Ibn_Katheer/Tafseer-Ibn-Kathir-01.pdf',
'https://rongdhonustudio.com/islamic_books/Tafsir_Ibn_Katheer/Tafseer-Ibn-Kathir-02.pdf',
'https://rongdhonustudio.com/islamic_books/Tafsir_Ibn_Katheer/Tafseer-Ibn-Kathir-03.pdf',
'https://rongdhonustudio.com/islamic_books/Tafsir_Ibn_Katheer/Tafseer-Ibn-Kathir-04.pdf',
];
@override
void initState() {
super.initState();
fileDownload();
}
int percentage = 0, totalFileSize;
Future<void> fileDownload() async {
tempDir = await getTemporaryDirectory();
//download file
tempPath = tempDir.path + "/" + booklist[widget.index];
var dio = Dio();
if (await File(tempPath).exists()) {
if (await File(tempPath).length() == 0) {
dio.download(
booklist[widget.index],
tempPath,
onReceiveProgress: (count, total) {
this.setState(() {
percentage = ((count / total) * 100).floor();
});
},
);
} else {
this.setState(() {
percentage = 100;
});
}
} else {
dio.download(
booklist[widget.index],
tempPath,
onReceiveProgress: (count, total) {
this.setState(() {
percentage = ((count / total) * 100).floor();
});
percentage = ((count / total) * 100).floor();
totalFileSize = total;
},
);
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Syncfusion Flutter PDF Viewer'),
),
body: percentage == 100
? SfPdfViewer.file(File(tempPath))
: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
padding: EdgeInsets.all(10),
child: LinearProgressIndicator(
backgroundColor: Colors.white,
value: percentage.toDouble() / 100,
valueColor: AlwaysStoppedAnimation<Color>(Colors.red),
),
),
Text(
(percentage.toDouble()).toString() + " %",
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 23),
),
Text("Please wait file downloading",
style:
TextStyle(fontWeight: FontWeight.bold, fontSize: 23))
],
),
),
);
}
}

Answer 1

在分析给定的代码时，我们可以重现页面转换中报告的UI滞后。Syncfusion Flutter PdfViewer加载PDF页面的图像，该图像使用本地平台的渲染器渲染，此过程需要一些时间才能加载PDF文档。使用LinearProgressIndicator指示图像加载。为了解决页面转换中的问题，我们建议在加载每个页面之前添加Future.delayed。我们已经修改了代码并分享给您以供参考。可以从以下链接下载修改后的代码。https://www.syncfusion.com/downloads/support/directtrac/general/ze/book496455946