英文:
Flutter: Why is my listTile color being overwritten by the container color?
问题
我有一个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, // 这里设置了`Container`的颜色
child: ExerciseTable(
userExercises: todaysExercises,
editFunction: _showEditDialog,
),
);
导致以下结果：
谢谢！（对于图片大小我不知道如何更改）
英文:
I have a listTile builder that returns this listTile. The color of the listTile, white, is overwritten by its parent. How do I stop this?
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]),
);
However, when I run my app, the tileColor is overwritten by the parent Container's color.
return Container(
alignment: Alignment.center,
color: Colors.lightBlue,
child: ExerciseTable(
userExercises: todaysExercises,
editFunction: _showEditDialog,
),
);
Resulting in the following:
Thank you! (and sorry for the image size I don't know how to change it)
答案1
得分: 5
ListTile 在其祖先中的 Material widget 上绘制其 tileColor。当有一个有颜色的 Container 处于 ListTile 和该祖先之间时，你将看不到 tileColor。从这里引用：https://github.com/flutter/flutter/pull/86355/commits/9341a6b1d0d2852ee3c7eb413bbbdc9327f425c8 ：
/// 要求其中一个祖先是 [Material] widget。
/// 必须有一个祖先是 [Material] widget，通常由应用的 [Scaffold] 提供。
/// [tileColor]、[selectedTileColor]、[focusColor] 和 [hoverColor] 不是由
/// 列表项本身绘制的，而是由 material widget 祖先绘制的。这通常没有影响。
/// 但是，如果在 [ListTile] 和其 [Material] 祖先之间包含了一个不透明的
/// widget，比如 `Container(color: Colors.white)`，那么不透明的 widget 将遮挡
/// material widget 及其背景的 [tileColor] 等。如果这是一个问题，可以将
/// material widget 包装在列表项周围，例如：
/// 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
英文:
ListTile paints its tileColor on a Material widget ancestor. When a colored Container is in between the ListTile and that ancestor you won't see the tileColor. To quote from here 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,
/// ),
/// ),
/// )
See also this discussion: https://github.com/flutter/flutter/issues/83108
答案2
得分: 2
使用 Material 小部件包装 ListTile，因为 tileColor 不是由 ListTile 小部件本身绘制，而是由材料小部件绘制的。
英文:
Warp the ListTile with Material widget because tileColor is not painted by the ListTile widget itself but by the material widget.
答案3
得分: 1
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]),
)
);
英文:
I am surprised, when I looking at this issue. Wrap the ListTile with Material will solve the issue, but still I'm not sure how issue is happening.
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]),
)
);
</details>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论