flutter ListView.分隔的尾随图标都显示CircularProgressIndicator，而不仅仅是被点击的图标

hwamh0ep 于 2023-10-22 发布在 Flutter

关注(0)|答案(1)|浏览(135)

我使用的是ListView.separated，当用户点击下载按钮时，它应该显示一个CircularProgressIndicator（）;当文件正在被下载时，然后当下载结束时返回到下载按钮。它工作，但然后ListTile（）上的所有按钮转换为CircularProgressIndicator（）;而不仅仅是正在下载的文件。如何解决这一问题？或者有没有一种方法可以将index传递给尾随参数？

ListView.separated(
  itemBuilder: (context, index) {
    final file = files[index];
    return ListTile(
      title: Text(
        file.name,
      ),
      subtitle: const Text(
        '123456789',
        style: TextStyle(
            fontFamily: 'Poppins',
            fontSize: 12,
            color: Colors.black),
      ),
      trailing: !isDownloading
          ? IconButton(
              icon: const Icon(
                Icons.download_rounded,
              ),
              onPressed: () {
                setState(() {
                  isDownloading = true;
                });
                downloadFile(index, file);
                setState(() {
                  isDownloading = false;
                });
              })
          : CircularProgressIndicator(),
    );
  },
  separatorBuilder: (_, index) =>
      const SizedBox(height: 15),
  itemCount: files.length,
);

我试着用一种建筑材料把它包起来，但那行不通

flutter

来源：https://stackoverflow.com/questions/77320338/listview-separated-trailing-icons-all-show-circularprogressindicator-instead-of

1条答案

按热度按时间

gt0wga4j1#

您可以通过创建一个布尔值列表来跟踪每个项目的下载状态。下面是你修改后的例子：

ListView.separated(
  itemBuilder: (BuildContext context, index) {
    final file = files[index];
    return ListTile(
      title: Text(file.name),
      subtitle: const Text(
        '123456789',
        style: TextStyle(
          fontFamily: 'Poppins',
          fontSize: 12,
          color: Colors.black,
        ),
      ),
      trailing: isDownloading[index]
          ? const CircularProgressIndicator()
          : IconButton(
              icon: Icon(Icons.download_rounded),
              onPressed: () {
                setState(() {
                  isDownloading[index] = true;
                });

                //Add your download process (replace this with your actual download logic)
                Future.delayed(Duration(seconds: 3), () {
                  setState(() {
                    isDownloading[index] = false;
                  });
                });
              },
            ),
    );
  },
  separatorBuilder: (BuildContext context, index) => SizedBox(height: 15),
  itemCount: files.length,
);

我们使用一个名为isDownloading的列表来监视每个项目的下载状态。当开始下载特定项目时，只有该项目的状态标记为“正在下载”，并显示该项目的进度指示器。下载完成后，项目的状态将重置，下载按钮将返回其正常状态。这允许单独跟踪列表中每个项目的下载进度。
我希望这对你有帮助。

赞(0）回复(0）举报 2023-10-22

我来回答

flutter ListView.分隔的尾随图标都显示CircularProgressIndicator，而不仅仅是被点击的图标

1条答案

相关问题

热门标签

最新问答