在flutter中与api分开显示pdf和图像的列表

Posted 2023-02-23

【中文标题】在flutter中与api分开显示pdf和图像的列表

【英文标题】：display list of pdf and image separately from api in flutter

【发布时间】：2021-11-17 10:22:11

【问题描述】：

我想显示从 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')'),
                                                          ),
                                                        ),
                                                ),
                                              ),

【参考方案1】：

您可以使用来自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');
  ,
),

包link.

对于列表，

       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的教程链接

【讨论】：

这是查看 pdf，但在此之前我想显示我正在获取的 pdf 列表。

您可以使用 listview.builder 来实现这一点，并且您将制作一个带有手势检测器的容器和一个 Text 小部件来显示名称（您可以从路径中获取）。

是的，我这样做了，但您可以看到我无法在列表中显示 pdf。

你能上传最少的可复制代码吗，因为我没有得到你所面临的问题。

我做到了@Ruchit