Flutter实现删除数据库条目时显示加载文本并刷新ListView

要实现点击删除按钮后显示加载状态、完成后再刷新列表的效果，可以按以下步骤修改代码：

• 第一步：在页面的State类中添加状态变量，跟踪每个条目的删除状态
  由于每个条目可能独立触发删除操作，用Map来存储索引与对应加载状态的映射，初始为空：

  Map<int, bool> _deletingStatus = {};
  Future<dynamic> data = Database.getItems();
  

• 第二步：修改删除按钮的点击逻辑
  点击时先标记当前条目为"删除中"，执行删除操作后取消标记，最后刷新列表数据：

  return ListView.builder(
    itemCount: snapshot.data.length,
    itemBuilder: (BuildContext context, int index) {
      final isDeleting = _deletingStatus[index] ?? false;
      return ItemWidget(
        isDeleting: isDeleting,
        onDeleteTap: () async {
          // 标记当前条目为删除中
          setState(() {
            _deletingStatus[index] = true;
          });
          try {
            await Database.delete(snapshot.data[index]["_id"]);
          } finally {
            // 无论删除成功/失败，都取消加载标记
            setState(() {
              _deletingStatus[index] = false;
            });
            // 刷新列表数据
            data = Database.getItems();
          }
        },
        itemData: snapshot.data[index], // 传递条目数据给ItemWidget
      );
    },
  );
  

• 第三步：修改ItemWidget，支持加载状态展示
  让ItemWidget接收isDeleting参数，根据状态切换显示删除按钮或加载提示：

  class ItemWidget extends StatelessWidget {
    final bool isDeleting;
    final VoidCallback onDeleteTap;
    final dynamic itemData;
  
    const ItemWidget({
      super.key,
      required this.isDeleting,
      required this.onDeleteTap,
      required this.itemData,
    });
  
    @override
    Widget build(BuildContext context) {
      return Container(
        // 保留你原有的ItemWidget布局结构
        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            // 条目内容区域，比如显示标题等信息
            Expanded(child: Text(itemData["content"])),
            // 删除操作区域：根据状态切换显示
            isDeleting
                ? const Text("删除中...") // 也可以替换成加载动画组件
                : IconButton(
                    icon: const Icon(Icons.delete, color: Colors.red),
                    onPressed: onDeleteTap,
                  ),
          ],
        ),
      );
    }
  }
  

关键说明 #

• 用_deletingStatus单独控制每个条目的加载状态，不会影响其他条目正常显示
• 使用try/finally确保即使删除操作抛出异常，也会取消加载状态，避免界面一直停留在加载状态
• ItemWidget根据isDeleting参数动态切换显示内容，让用户直观感知删除操作的执行状态

内容的提问来源于stack exchange，提问作者Asad Kareem