Question

在下面的代码中，我正在从图像文件夹中读取pdf文件，然后在新页面中对其进行查看。但是，当我导航到新页面时，需要花费一些时间来加载pdf。因此，我想在过渡时添加一个CircularProgressIndicator。我不知道该怎么做。如何添加CircularProgressIndicator小部件？

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:path_provider/path_provider.dart';
import 'package:flutter_full_pdf_viewer/flutter_full_pdf_viewer.dart';

class PdfPage extends StatefulWidget {
  @override
  _PdfPageState createState() => _PdfPageState();
}

class _PdfPageState extends State<PdfPage> {
  Future<String> makeFile() async {

    Directory tempDir = await getTemporaryDirectory();
    String tempPath = tempDir.path;
    File tempFile = File('$tempPath/copy.pdf');
    ByteData bd = await rootBundle.load('images/dummy.pdf');
    await tempFile.writeAsBytes(bd.buffer.asUint8List(), flush: true);
    return tempFile.path;
  }

  bool isLoading = false;
  @override
  void initState() {
    // TODO: implement initState
    super.initState();

    makeFile().then((value) {
      setState(() {
        path = value;
        print(path);
        //isLoading = false;
      });
    });
  }

  String path;

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: RaisedButton(
          child: Text("Open PDF Screen"),
          onPressed: () {
            // CircularProgressIndicator(value: true,);
            Navigator.push(context,
                MaterialPageRoute(builder: (context) => PDFScreen(path)));
          },
        ),
      ),
    );
  }
}

class PDFScreen extends StatelessWidget {
  final String path;
//  final bool isLoading;
  PDFScreen(
    this.path,
  );

  @override
  Widget build(BuildContext context) {
    return PDFViewerScaffold(
        appBar: AppBar(
          title: Text("Scaffold PDF"),
        ),
        path: path);
  }
}

Answer 1

一种方法是在对话框中使用它。

static Future showDialog(BuildContext context, GlobalKey _key) async   {
  return showLoadingDialog(
    context: context,
    barrierDismissible: false,
    builder: (BuildContext context){
      return SimpleDialog(
          key: _key,
          children: <Widget>[
            Center(
              child: Container(
                child: Row(
                children: <Widget>[
                  CircularProgressIndicator(),
                  SizedBox(
                    height:10,
                    width:10,
                  ),
                  Text("Please Wait!"),
                ]
             ),
          ],
        ),
      );
    }
  );
}

此处GlobalKey用于Show或hide创建的对话框。

要调用此方法，请将类中的GlobalKey初始化为GlobalKey<State> _dialogKey = GlobalKey<State>();。

然后您可以将对话框显示为：

showLoadingDialog(context, _dialogKey);

要隐藏它，只需致电：

Navigator.of(_dialogKey.currentContext,rootNavigator: true).pop();

这只是在CircularProgressIndicator中使用SimpleDialog的一种方法，希望对您有所帮助。

Answer 2

您可以使用为此专门设计的FutureBuilder类。也就是说，预计将来会采取一些措施，同时您希望显示进度指示器。该操作实际上可能完成或返回错误。 Futurebuilder使您可以处理所有这些情况。

您可以将makefile（）移到类PDFScreen中，并使用小部件构建方法返回FutureBuilder。最简单的实现如下。

@override
Widget build(BuildContext context) {
   return FutureBuilder<String>(
       future: makeFile(),
       builder: (BuildContext context, AsyncSnapshot<String>  snapshot) {
           if (snapshot.connectionState != ConnectionState.done) {
               return CircularProgressIndicator();
            } else {
               return PDFViewerScaffold(
                   appBar: AppBar(
                       title: Text("Scaffold PDF"),
                   ),
                   path: snapshot.data
                );
            }
        },
   );
}

您可能想访问Medium上的official docuementation或this博客。

导航到PDF查看页面时如何添加CircularProgressIndicator

2 个答案: