Flutter中ListTile的tileColor滚动卡顿残留问题求助

问题描述 #

使用ListView.builder时，滚动列表后ListTile的tileColor会残留在屏幕上，需点击屏幕才会消失，切换页面后也会出现类似残留。切换为BouncingScrollPhysics可解决，但希望保留默认滚动物理配置。

解决方案 #

方案1：给ListView添加背景色 #

为ListView设置与Scaffold一致的背景色，覆盖滚动回弹时的残留颜色：

class GroupPage extends StatelessWidget {
  const GroupPage({super.key});

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      backgroundColor: Colors.white, // 添加该行，与Scaffold背景色一致
      itemCount: 15,
      itemBuilder: (context, index) {
        return Padding(
          padding: const EdgeInsets.only(left: 16, right: 16, bottom: 7),
          child: ListTile(
            tileColor: Colors.grey[200],
            shape:
                RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
            contentPadding:
                const EdgeInsets.symmetric(horizontal: 16, vertical: 10),
            leading: const CircleAvatar(
              child: Icon(Icons.group),
            ),
            title: Text(
              'Group $index',
              style: const TextStyle(
                fontSize: 20,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
        );
      },
    );
  }
}

方案2：修改页面过渡动画的填充色 #

将FadeThroughTransition的fillColor从透明改为Scaffold背景色，切换页面时覆盖残留：

return FadeThroughTransition(
  fillColor: Colors.white, // 替换原transparent
  animation: primaryAnimation,
  secondaryAnimation: secondaryAnimation,
  child: child,
);

方案3：用Container包裹ListTile替代tileColor #

用外层Container设置背景色，避免ListTile内部颜色渲染残留：

itemBuilder: (context, index) {
  return Padding(
    padding: const EdgeInsets.only(left: 16, right: 16, bottom: 7),
    child: Container(
      decoration: BoxDecoration(
        color: Colors.grey[200],
        borderRadius: BorderRadius.circular(16),
      ),
      child: ListTile(
        // 移除tileColor配置
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
        contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 10),
        leading: const CircleAvatar(child: Icon(Icons.group)),
        title: Text(
          'Group $index',
          style: const TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
        ),
      ),
    ),
  );
}

原因说明 #

该问题源于默认滚动物理效果（Android平台的ClampingScrollPhysics）的回弹行为，结合FadeThroughTransition的页面切换动画，导致ListView的渲染缓存未被正确清理，残留了ListTile的背景色。上述三种方案均通过填补或替换残留区域的颜色，解决问题同时保留默认滚动配置。

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