我想在用户点击封面时查看PDF文件

Question

我想在用户点击封面时查看PDF文件。我是Flutter的新手。

你们能找出我的代码出了什么问题吗？当我敲那本书时，它什么也没做。

我认为问题出在PDF查看器的功能上。

我使用的是advance_pdf_viewer 1.1.6。

class Books extends StatefulWidget {
@override
_BooksState createState() => _BooksState();
}
class _BooksState extends State<Books> {
bool _isLoading = true;
PDFDocument document;
var url;
@override
void initState() {
super.initState();
loadDocument();
}
loadDocument() async {
document = await PDFDocument.fromURL(url);
setState(() => _isLoading = false);
}
changePDF(value) async {
setState(() => _isLoading = true);
if (value == 1) {
document = await PDFDocument.fromURL(url);
} else {
print('nothing');
}
setState(() => _isLoading = false);
}
@override
Widget build(BuildContext context) {
return StreamBuilder(
stream: Firestore.instance.collection('books').snapshots(),
builder: (
context,
snapshot,
) {
if (snapshot.data == null)
return Center(
child: CircularProgressIndicator(
backgroundColor: Colors.red,
valueColor: new AlwaysStoppedAnimation<Color>(Colors.teal),
),
);
return GridView.builder(
shrinkWrap: true,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3, childAspectRatio: 0.7),
itemCount: snapshot.data.documents.length,
itemBuilder: (context, index) => Padding(
padding: const EdgeInsets.all(8.0),
child: GridTile(
child: InkWell(
onTap: () async {
PDFDocument.fromURL(snapshot.data.documents[index]['url']);
_isLoading
? Center(child: CircularProgressIndicator())
: PDFViewer(document: document);
},
child: Container(
height: 200,
width: 110,
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.red[500].withOpacity(0.6),
spreadRadius: 0.5,
blurRadius: 1,
offset: Offset(2, 0),
),
],
color: Colors.white,
borderRadius: BorderRadius.circular(3),
border: Border.all(
style: BorderStyle.solid,
color: Colors.red[500],
width: 0.3)),
child: Column(children: <Widget>[
Padding(
padding: const EdgeInsets.all(5.0),
child: Container(
child: Image.network(
snapshot.data.documents[index]['image'],
width: 100,
),
),
),
SizedBox(height: 5),
Text(
snapshot.data.documents[index]['name'],
)
]),
),
),
),
),
);
});
}
}

Answer 1

PDFViewer返回一个Widget。如果你想在点击InkWell时查看pdf文件，你需要制作一个小部件，显示PDFViewer返回的小部件，例如

class PDFScreen extends StatelessWidget {
PDFDocument document;
PDFScreen({@required this.document});
@override
Widget build(BuildContext context) {
return Scaffold(
child: PDFViewer(document: document)
);
}
}

并将InkWell的onTap()更改为：

onTap: () async {
PDFDocument.fromURL(snapshot.data.documents[index]['url']);
_isLoading
? Center(child: CircularProgressIndicator())
: Navigator.push(context, MaterialPageRoute(builder: (context) => PDFScreen(document: document)));
},