Flutter问题：ListTile的tileColor为何被父级Container颜色覆盖？

我通过ListTile构建器返回如下ListTile，已将tileColor设置为白色，但该颜色被其父级组件的颜色覆盖，请问如何阻止这种情况？

ListTile代码： #

return ListTile(
   key: Key(index.toString()),
   tileColor: Colors.white,
   title: Text(widget.userExercises[index].name),
   subtitle: Text("${widget.userExercises[index].reps} Reps"),
   trailing: Text("${widget.userExercises[index].sets} Sets"),
   onTap: () => widget.editFunction(widget.userExercises[index]),
);

父级Container代码： #

return Container(
  alignment: Alignment.center,
  color: Colors.lightBlue,
  child: ExerciseTable(
    userExercises: todaysExercises,
    editFunction: _showEditDialog,
  ),
);

实际效果： #

运行应用时，ListTile的白色背景被父级Container的浅蓝色覆盖，预期Bench Press对应的tile应为白色：

解决方法： #

方法一：用Material组件包裹ListTile

ListTile的tileColor需要在Material环境下才能正常生效，给ListTile外层包裹Material组件并指定类型为card，即可让tileColor正常显示：

return Material(
  type: MaterialType.card,
  child: ListTile(
    key: Key(index.toString()),
    tileColor: Colors.white,
    title: Text(widget.userExercises[index].name),
    subtitle: Text("${widget.userExercises[index].reps} Reps"),
    trailing: Text("${widget.userExercises[index].sets} Sets"),
    onTap: () => widget.editFunction(widget.userExercises[index]),
  ),
);

方法二：用Container包裹ListTile并设置背景色

直接用Container包裹ListTile，给Container设置白色背景，替代ListTile的tileColor，确保背景层级在父级颜色之上：

return Container(
  color: Colors.white,
  child: ListTile(
    key: Key(index.toString()),
    title: Text(widget.userExercises[index].name),
    subtitle: Text("${widget.userExercises[index].reps} Reps"),
    trailing: Text("${widget.userExercises[index].sets} Sets"),
    onTap: () => widget.editFunction(widget.userExercises[index]),
  ),
);

方法三：调整父级背景设置

如果父级Container仅用于设置整体背景，可以将背景色移到Scaffold的backgroundColor属性中，避免直接用Container包裹子组件导致颜色覆盖：

return Scaffold(
  backgroundColor: Colors.lightBlue,
  body: Center(
    child: ExerciseTable(
      userExercises: todaysExercises,
      editFunction: _showEditDialog,
    ),
  ),
);

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