使用Dismissible与Provider时动画卡顿问题求助

云原生阿岚

2026-8-20

解决Dismissible滑动删除时Provider.notifyListeners()导致的动画卡顿问题

核心问题是：滑动删除时，notifyListeners()会立即触发UI重建，和Dismissible的动画帧渲染抢占UI线程，导致掉帧卡顿。下面是几个实用的解决办法：

1. 延迟到Dismissible动画完成后再调用notifyListeners()

Dismissible提供了onDismissed回调，这个回调会在滑动动画完全结束后触发。你可以把数据移除和状态通知拆分：

修改Provider中的deleteNotebook方法，只做数据移除，暂时不通知：

void deleteNotebook(String id) {
  _notebooks.removeWhere((item) => item.id == id);
  // 这里先不调用notifyListeners()
}

在Dismissible的onDismissed里完成数据删除后，再调用通知：

Dismissible(
  key: Key(object.id),
  onDismissed: (direction) {
    final provider = Provider.of<NMyProvider>(context, listen: false);
    provider.deleteNotebook(object.id);
    // 动画结束后再通知UI更新
    provider.notifyListeners();
  },
  child: YourCardWidget(),
)

这样动画先流畅完成，再触发UI重建，完全避免了两者的线程冲突。

2. 缩小Provider的监听范围，减少不必要的重建

如果你的页面有很多非列表内容，notifyListeners()会触发整个页面的重建，加重性能负担。可以用Consumer或者select来只重建需要更新的列表部分：

比如用Consumer包裹列表：

Consumer<NMyProvider>(
  builder: (context, provider, child) {
    return ListView.builder(
      itemCount: provider.notebooks.length,
      itemBuilder: (context, index) {
        final item = provider.notebooks[index];
        return Dismissible(
          // ... Dismissible配置
        );
      },
    );
  },
)

这样即使调用notifyListeners()，也只会重建列表区域，其他UI不受影响，能显著降低卡顿概率。