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

Question

我正在使用 'Syncfusion PDF viewer' 打开 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,
                  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。我们修改了代码并分享给大家参考。可以从以下link 下载修改后的代码。 https://www.syncfusion.com/downloads/support/directtrac/general/ze/book496455946

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

Performance lag while opening PDF file using Syncfusion PDF viewer

flutter

syncfusion

pdf-viewer

dio