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

发布于02月27日

我有一个ListTile构建器，它返回这个ListTile.List Tile的 colored颜色白色被其父级覆盖.我怎么才能阻止这一切？

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会被父容器的 colored颜色覆盖.

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

导致以下情况:

谢谢！(很抱歉图像大小，我不知道如何更改)

推荐答案

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