flutter - 在flutter中与api分开显示pdf和图像的列表
问题描述
我想显示从 API 获取的图像和 pdf 文件列表,作为响应,将它们分成 PFD 和图像。我已经使用 image.network 成功显示了我从 circleAvatar 中的 API 获取的图像列表,但现在我不知道如何显示 pdf 列表,以便当我点击一个 pdf 时它会在查看器中打开。下面是我想如何在列表中显示它的图像-:
第一个蓝色圆圈是空的,因为它有一个 pdf 路径,而下一个有一个图像。
用于显示图像和 pdf 文件的代码 -
GridView.count(
crossAxisCount: 3,
children: List.generate(document?.length, (ind) {
return
Padding(
padding: const EdgeInsets.all(8.0),
child: CircleAvatar(
radius: 80,
backgroundImage:
NetworkImage('${api.getHTTPUri('/${document[ind].documentPath}')}'),
),
),
}),
),
解决方案
您可以使用pub.dev中的以下软件包:flutter_pdfview
PDFView(
filePath: path,
enableSwipe: true,
swipeHorizontal: true,
autoSpacing: false,
pageFling: false,
onRender: (_pages) {
setState(() {
pages = _pages;
isReady = true;
});
},
onError: (error) {
print(error.toString());
},
onPageError: (page, error) {
print('$page: ${error.toString()}');
},
onViewCreated: (PDFViewController pdfViewController) {
_controller.complete(pdfViewController);
},
onPageChanged: (int page, int total) {
print('page change: $page/$total');
},
),
包链接。
对于列表,
ListView.builder(
itemCount: length, //pass the length of list
itemBuilder: (context, index) {
return GestureDetector(
onTap: () {
//code for opening pdf goes here
},
child: Container(
color: Colors.grey.shade200,
margin: EdgeInsets.symmetric(
horizontal: 4, vertical: 8),
child: Row(children:[
//code of circle avatar
Text("//name of pdf at this index")])
),
);
},
),
listview.builder教程链接
推荐阅读
- javascript - 导入的 SVG 渲染为字符串
- reactjs - 尝试将 JSON 导入 React 组件时出错:“您可能需要适当的加载器”,但已安装正确的加载器
- c# - 在 ASP.NET MVC 中加密和解密密码
- firebase - Firebase 允许用户使用密钥进行访问
- git - 如何在 Flutter 中隐藏 API Keys 并且仍然能够让您的团队使用您的代码库?
- python - 有没有办法让python根据不断变化的日期变量来查找文件名?
- angular - DatePipe 转换显示错误的日期格式
- java - 如何在没有 instanceof 的情况下“映射”两个不同的对象继承树
- kotlin - 为什么 Kotlin 在线编辑器会抛出 FileNotFoundException 异常?
- haskell - 检查二叉树是否完整 - haskell