Flutter：为什么我的 listTile 颜色被容器颜色覆盖？

Question

我有一个返回此 listTile 的 listTile 构建器。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]),
);

但是，当我运行我的应用程序时，tileColor 会被父容器的颜色覆盖。

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

结果如下：

谢谢你！（抱歉，图像尺寸我不知道如何更改）

Answer 1

ListTile将其绘制tileColor在Material小部件祖先上。当颜色Container介于ListTile和祖先之间时，您将看不到tileColor。从这里引用https://github.com/flutter/flutter/pull/86355/commits/9341a6b1d0d2852ee3c7eb413bbbdc9327f425c8：

/// Requires one of its ancestors to be a [Material] widget.
/// One ancestor must be a [Material] widget and typically this is
/// provided by the app's [Scaffold]. The [tileColor],
/// [selectedTileColor], [focusColor], and [hoverColor] are not
/// painted by the list tile itself but by the material widget
/// ancestor. This generally has no effect. However, if an opaque
/// widget, like `Container(color: Colors.white)`, is included in
/// between the [ListTile] and its [Material] ancestor, then the
/// opaque widget will obscure the material widget and its background
/// [tileColor], etc. If this a problem, one can wrap a material
/// widget around the list tile, e.g.:
///
/// Container(
///   color: Colors.green,
///   child: Material(
///     child: ListTile(
///       title: const Text('ListTile with red background'),
///       tileColor: Colors.red,
///     ),
///   ),
/// )

另请参阅此讨论：https://github.com/flutter/flutter/issues/83108