Question

我试图将轨迹保持在用户从pdf读取的页面上，因此首先我尝试控制文件的滚动，因为它按原样显示pdf并没有多大意义，所以如果我将pdf页面拆分为不同的文件，我可以跟踪，但是为了允许用户更改页面，我想添加一些控件，例如下一页和上一页。首先，我尝试添加一个浮动操作按钮，当用户点击屏幕时，该按钮应该隐藏并显示，所以我这样做：

我正在使用flutter_full_pdf_viewer插件。

import 'dart:async';
import 'dart:io';

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_full_pdf_viewer/full_pdf_viewer_scaffold.dart';
import 'package:path_provider/path_provider.dart';

void main() {
  runApp(MaterialApp(
    title: 'Little Readers',
    home: MyApp(),
  ));
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => new _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String pathPDF = "";
  double iconSize = 80;
  MaterialColor iconColor = Colors.blue;

  @override
  void initState() {
    super.initState();
    createFileOfPdfUrl().then((file) {
      setState(() {
        pathPDF = file.path;
        print(pathPDF);
      });
    });
  }

  Future<File> createFileOfPdfUrl() async {
    final url = "http://africau.edu/images/default/sample.pdf";
    final filename = url.substring(url.lastIndexOf("/") + 1);
    var request = await HttpClient().getUrl(Uri.parse(url));
    var response = await request.close();
    var bytes = await consolidateHttpClientResponseBytes(response);
    String dir = (await getApplicationDocumentsDirectory()).path;
    File file = new File('$dir/$filename');
    await file.writeAsBytes(bytes);
    return file;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('My App'),
      ),
      body: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          verticalDirection: VerticalDirection.down,
          children: <Widget>[
            Align(
              alignment: Alignment.topCenter,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  IconButton(
                    iconSize: iconSize,
                    color: iconColor,
                    icon: Icon(Icons.book),
                    onPressed: () => Navigator.push(
                          context,
                          MaterialPageRoute(
                              builder: (context) => PDFScreen(pathPDF)),
                        ),
                  ),
                ],
              ),
            ),
          ]),
    );
  }
}

class PDFScreen extends StatelessWidget {
  String pathPDF = "";
  PDFScreen(this.pathPDF);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          PDFViewerScaffold(
            appBar: AppBar(
              title: Text("My Book"),
              actions: <Widget>[
                IconButton(
                  icon: Icon(Icons.share),
                  onPressed: () => {},
                )
              ],
            ),
            path: pathPDF,
          ),
          Positioned(
            child: new FloatingActionButton(
              child: Icon(Icons.camera_alt),
              backgroundColor: Colors.green.shade800,
              onPressed: () => {},
            ),
          ),
        ],
      ),
    );
  }
}

问题是无论我设置了top，bottom，left或right属性，FAB都显示在AppBar上，它实际上根据我设置的位置而移动，但只能通过AppBar进行。

作为一种替代方案，实际上我认为这将是一个更优雅的解决方案，我想添加一个选项栏，就像在点击图像时android的图库一样。

我当然想通过pdf查看器获取它，但是我在寻找组件或实现它的方法方面遇到了问题。所以我正在为此寻找方向...

Answer 1

实际上我最近不得不自己做类似的事情。我用这样的Align小部件包裹了浮动操作按钮。

floatingActionButton: Align(
      child: Container(
        child: FloatingActionButton(
          heroTag: 'scaffoldBtn'+_scafKey.hashCode.toString(),
          onPressed: () {
            _scafKey.currentState.openDrawer();
          },
          backgroundColor: Utils.hexToColor('#07467A'),
          tooltip: 'Menu',
          child: Padding(
            padding: const EdgeInsets.only(left: 13.0),
            child: Icon(Icons.menu),
          ),
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.horizontal(
              right: Radius.circular(20.0),
            ),
            side:
                BorderSide(color: Utils.hexToColor('#979797'), width: 2.0),
          ),
        ),
        width: 65.0,
        height: 55.0,
      ),
      alignment: Alignment(-0.99, 0.9),
    ),

这里是Align小部件的链接，以获取更多详细信息。 https://api.flutter.dev/flutter/widgets/Align-class.html

希望这会有所帮助！

pdf查看器上的Flutter显示/隐藏选项栏

1 个答案: