Flutter：自定义未展开状态下ExpansionPanelList的样式

一、直接调整现有组件样式 #

1. 控制未展开状态的内边距 #

ExpansionPanel的headerBuilder可以返回自定义容器，通过Container的padding属性直接设置未展开时头部的内边距，完全替代默认样式：

ExpansionPanel(
  headerBuilder: (context, isExpanded) {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 20, vertical: 15), // 自定义内边距
      child: const Text('面板标题'),
    );
  },
  body: const Padding(
    padding: EdgeInsets.all(16),
    child: Text('面板内容'),
  ),
  isExpanded: _isPanelExpanded,
)

2. 修改边框与分隔线颜色 #

方法1：通过局部Theme修改全局分隔线

ExpansionPanelList的分隔线颜色继承自Theme的dividerColor，可以用Theme组件包裹局部区域，覆盖默认值：

Theme(
  data: Theme.of(context).copyWith(
    dividerColor: Colors.orange, // 面板间分隔线颜色
    expansionPanelTheme: ExpansionPanelThemeData(
      headerBackgroundColor: Colors.grey[100], // 未展开时头部背景色
      elevation: 3,
    ),
  ),
  child: ExpansionPanelList(
    elevation: 3,
    children: [/* 你的ExpansionPanel列表 */],
  ),
)

方法2：给头部添加自定义边框

如果需要给每个未展开面板的头部单独加边框，直接在headerBuilder的容器中设置decoration：

headerBuilder: (context, isExpanded) {
  return Container(
    padding: EdgeInsets.symmetric(horizontal: 16, vertical: 12),
    decoration: BoxDecoration(
      border: Border(
        bottom: BorderSide(color: Colors.blue, width: 1.5),
      ),
    ),
    child: const Text('带边框的面板标题'),
  );
},

二、替代方案：自定义展开面板组件 #

如果ExpansionPanelList的默认限制无法满足需求，用AnimatedContainer和GestureDetector自己实现完全可控的展开面板，灵活性更高：

class CustomExpandPanel extends StatefulWidget {
  final Widget header;
  final Widget body;
  const CustomExpandPanel({super.key, required this.header, required this.body});

  @override
  State<CustomExpandPanel> createState() => _CustomExpandPanelState();
}

class _CustomExpandPanelState extends State<CustomExpandPanel> {
  bool _expanded = false;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        GestureDetector(
          onTap: () => setState(() => _expanded = !_expanded),
          child: Container(
            padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 14),
            decoration: BoxDecoration(
              color: Colors.white,
              border: Border(bottom: BorderSide(color: Colors.grey[200]!)),
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                widget.header,
                Icon(_expanded ? Icons.expand_less : Icons.expand_more),
              ],
            ),
          ),
        ),
        AnimatedContainer(
          duration: const Duration(milliseconds: 300),
          height: _expanded ? null : 0,
          child: _expanded ? widget.body : null,
        ),
      ],
    );
  }
}

使用时直接将多个CustomExpandPanel放入Column或ListView，内边距、边框样式、动画速度等都能按需调整。

内容的提问来源于stack exchange，提问作者Uwe.Schneider