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

fykwrbwg 于 2023-03-04 发布在 Flutter

关注(0)|答案(3)|浏览(285)

我有一个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被父Container的颜色覆盖。

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

结果如下：

谢谢！（抱歉的图像大小，我不知道如何改变它）

flutter

来源：https://stackoverflow.com/questions/75577429/flutter-why-is-my-listtile-color-being-overwritten-by-the-container-color

3条答案

按热度按时间

r55awzrz1#

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

赞(0）回复(0）举报 2023-03-04

gdrx4gfi2#

当我看到这个问题时，我很惊讶。用Material Package ListTile将解决这个问题，但我仍然不确定问题是如何发生的。

return Material(
 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]),
 )
);

赞(0）回复(0）举报 2023-03-04

vatpfxk53#

使用Material构件扭曲ListTile，因为tileColor不是由ListTile构件本身绘制的，而是由Material构件绘制的。

赞(0）回复(0）举报 2023-03-04