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

问题描述

我正在使用“Syncfusion PDF 查看器”在 android 中打开 PDF 文件。我正在使用“dio”和“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,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],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))
                ],);
  }
}

解决方法

来自 Syncfusion 的问候。

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

如果您有任何疑问，请告诉我们。

问候，迪利巴布。

dio pdf-viewer syncfusion