Flutter：自定义ExpansionTile

Question

在Flutter中，能否修改扩展瓷砖（Expansion Tile）？具体来说，我想删除它展开时创建的分隔线。此外，我还想调整其填充。是否有可能实现？谢谢！

- nypogi

---

只需从 https://github.com/flutter/flutter/blob/d927c9331005f81157fa39dff7b5dab415ad330b/packages/flutter/lib/src/material/expansion_tile.dart#L176-L184 复制 ExpansionTile 源代码，按照您的意愿进行编辑，即可创建自定义的 ExpansionTile！ - User

Answer 1

从ExpansionTile的源代码中获取

https://github.com/flutter/flutter/blob/d927c9331005f81157fa39dff7b5dab415ad330b/packages/flutter/lib/src/material/expansion_tile.dart#L176-L184

  Widget build(BuildContext context) {
    final ThemeData theme = Theme.of(context);
    _borderColor.end = theme.dividerColor;
    _headerColor
      ..begin = theme.textTheme.subhead.color
      ..end = theme.accentColor;
    _iconColor
      ..begin = theme.unselectedWidgetColor
      ..end = theme.accentColor;
    _backgroundColor.end = widget.backgroundColor;

您可以通过将元素包装在 Theme 中来影响您所能够影响的内容，例如通过修改 dividerColor

_borderColor.end = theme.dividerColor;

final theme = Theme.of(context).copyWith(dividerColor: Colors.yellow);
return Theme(data: theme, child: ExpansionTile(...));     

与_headerColor、_iconColor和_backgroundColor类似。 如果您需要更多自定义，您可以随时复制源代码并按照您的喜好进行自定义。

- Günter Zöchbauer

---

@GunterZochbauer正在编辑源代码，这是一个更好的做法吗？我曾有类似的问题，我查看了展开瓦片（Expansion Tile）源代码，当瓦片被展开时边框被应用，因为我不需要它们，所以我只是简单地注释掉了那段代码，并且它对我起作用，那么这样做是否应该或者算是一种不良实践呢？ - Mahesh Jamdade

如果您更改~/.pub-cache/...或~/.flutter/...中的代码，那么您在Flutter上将没有任何乐趣 - 根本不好玩 - 永远不要这样做。该目录中的更改可能随时丢失。如果您将源代码复制到自己的项目中，则维护负担就落在您身上，因为当Flutter团队进行更改时，您甚至不会收到通知，您的代码可能变得陈旧。如果小部件根本不允许以其他方式自定义其行为以满足您的需求（如上例所示），则复制可能是较小的负担。 - Günter Zöchbauer

Answer 2

只需使用 Theme widget 包装并将分隔线颜色设置为透明即可去除分割线。

final theme = Theme.of(context).copyWith(dividerColor: Colors.transparent);
return Theme(data: theme, child: ExpansionTile(...));    

- Tarun Sharma

---

这个答案太简略了，没有提供足够的解释来解决原帖作者的问题。 - NonCreature0714

Answer 3

注释掉

//        border: Border(
//          top: BorderSide(color: borderSideColor),
//          bottom: BorderSide(color: borderSideColor),
//        ),

来自 expansion_tile.dart

- shahana kareen

---

这不是一个好的做法，因为当Flutter团队更新他们的代码时，它会被覆盖，请阅读上面@GunterZochbauer的评论。 - Mahesh Jamdade