Flutter：如何为ExpansionTile设置自定义主题，解决展开时头部背景色异常

当然可以给ExpansionTile自定义主题！你遇到的展开时头部背景色和子项一致的问题，其实是因为默认ExpansionTile会在展开时把头部的高亮状态色和子项的背景色绑定到了一起，我给你几个实用的解决办法：

方法一：通过局部Theme隔离颜色 #

这种方法适合你想统一设置子项背景，同时让头部保持独立样式的场景。我们可以用Theme组件包裹ExpansionTile，单独定义子项的背景色，同时覆盖默认的头部高亮色，避免展开时被影响：

Theme(
  data: Theme.of(context).copyWith(
    // 设置子项区域的背景色
    canvasColor: Colors.grey[100],
    // 取消展开时头部的默认高亮色，防止被子项背景色覆盖
    selectedTileColor: Colors.transparent,
  ),
  child: ExpansionTile(
    title: Container(
      color: Colors.blue[50], // 头部的专属背景色
      padding: EdgeInsets.symmetric(vertical: 8, horizontal: 16),
      child: Text('我的折叠面板'),
    ),
    children: [
      // 子项会自动继承Theme里的canvasColor作为背景
      Padding(
        padding: EdgeInsets.all(16),
        child: Text('这是折叠起来的子内容'),
      ),
    ],
  ),
)

方法二：直接独立设置头部与子项背景 #

如果不需要依赖主题，直接给头部和子项各自套Container设置背景，同时把ExpansionTile本身的背景设为透明，就能彻底隔离两者的颜色：

ExpansionTile(
  // 关键：把ExpansionTile自身的背景设为透明，避免展开时触发默认的颜色变化
  backgroundColor: Colors.transparent,
  title: Container(
    color: Colors.blue[50],
    padding: EdgeInsets.symmetric(vertical: 8, horizontal: 16),
    child: Text('我的折叠面板'),
  ),
  children: [
    Container(
      color: Colors.grey[100],
      padding: EdgeInsets.all(16),
      child: Text('这是折叠起来的子内容'),
    ),
  ],
)

进阶：动态控制展开时的头部样式 #

如果希望展开时头部有轻微的颜色变化（而不是完全和子项一致），可以用onExpansionChanged回调配合状态管理来动态切换头部背景色：

bool _isExpanded = false;

// 在build方法中使用
ExpansionTile(
  backgroundColor: Colors.transparent,
  onExpansionChanged: (expanded) {
    setState(() {
      _isExpanded = expanded;
    });
  },
  title: Container(
    // 展开时切换头部背景色
    color: _isExpanded ? Colors.blue[100] : Colors.blue[50],
    padding: EdgeInsets.symmetric(vertical: 8, horizontal: 16),
    child: Text('我的折叠面板'),
  ),
  children: [
    Container(
      color: Colors.grey[100],
      padding: EdgeInsets.all(16),
      child: Text('这是折叠起来的子内容'),
    ),
  ],
)

这几种方法都能完美解决你遇到的问题，根据你的实际需求选择就行～

内容的提问来源于stack exchange，提问作者Karthik Dhanya