Flutter中ListView Builder搭配Dismissible删除列表项时ListTile背景动画不同步问题

我太懂这种动画脱节的糟心感了——文字嗖的一下就挪上去了，背景却慢半拍跟着动，完全破坏了流畅的体验对吧？

这个问题的根源其实是你把tileColor直接设置在ListTile上导致的。ListTile的tileColor是在它自身的内部层级绘制的，和文字的布局属于不同的绘制层，当Dismissible执行删除动画时，这两个层级的动画不同步，就出现了你看到的"分家"情况。

解决方法很简单，只需要把背景色的设置从ListTile移到它外层的一个Container里，让整个列表项的背景和内容成为一个整体，这样Dismissible的动画就会作用在这个整体上，两者就会同步动起来了：

修改后的代码示例：

Expanded(
  child: ListView.builder(
    itemCount: todos.length,
    itemBuilder: (context, index) {
      return Dismissible(
        key: ValueKey(todos[index]), // 用ValueKey比直接Key更规范
        onDismissed: (direction) {
          setState(() {
            todos.removeAt(index);
            checkboxState.removeAt(index);
          });
        },
        child: Container(
          color: primaryColor, // 把原来的tileColor移到这里
          child: ListTile(
            title: Text(
              todos[index],
            ),
          ),
        ),
      );
    },
  ),
)

另外再提个小建议：如果你的todos列表里有重复的内容，用todos[index]作为Key可能会出问题，最好给每个待办项加一个唯一的ID，用ValueKey(todo.id)这种方式来生成Key，这样能保证Flutter的Widget树正确识别每个列表项，避免其他潜在的布局问题。

内容来源于stack exchange