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

Question

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

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,
                          );

我尝试将其包装在构建器中，但这行不通

Answer 1

您可以通过创建布尔值列表来跟踪每个项目的下载状态来做到这一点。这是您修改后的示例：-

  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 的列表来监视每个项目的下载状态。当开始下载特定项目时，只有该项目的状态被标记为“正在下载”，并显示该项目的进度指示器。下载完成后，项目的状态将重置，下载按钮将恢复到正常状态。这允许单独跟踪列表中每个项目的下载进度。

希望这对您有帮助。