Flutter中ExpansionPanel项边框无法铺满宽度，求解决方案

核心思路 #

ExpansionPanel默认的header区域会预留箭头位置，直接给Panel加边框会被该区域限制。通过自定义header/body布局+关闭默认阴影+调整内边距，就能实现全屏宽度的边框效果。

具体实现代码 #

class FullWidthBorderPanel extends StatefulWidget {
  const FullWidthBorderPanel({super.key});

  @override
  State<FullWidthBorderPanel> createState() => _FullWidthBorderPanelState();
}

class _FullWidthBorderPanelState extends State<FullWidthBorderPanel> {
  final List<Item> _data = List.generate(
    3,
    (index) => Item(
      headerValue: '面板 ${index + 1}',
      expandedValue: '面板 ${index + 1} 的展开内容',
    ),
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('全屏边框面板')),
      body: SingleChildScrollView(
        child: Container(
          margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
          child: ExpansionPanelList(
            elevation: 0, // 关闭默认阴影与自带边框
            expansionCallback: (int index, bool isExpanded) {
              setState(() {
                _data[index].isExpanded = !isExpanded;
              });
            },
            children: _data.map<ExpansionPanel>((Item item) {
              return ExpansionPanel(
                backgroundColor: Colors.white,
                headerBuilder: (BuildContext context, bool isExpanded) {
                  return Container(
                    width: double.infinity,
                    padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
                    decoration: const BoxDecoration(
                      border: Border(
                        top: BorderSide(color: Colors.grey.shade300),
                        left: BorderSide(color: Colors.grey.shade300),
                        right: BorderSide(color: Colors.grey.shade300),
                        bottom: BorderSide(color: Colors.grey.shade300),
                      ),
                    ),
                    child: Text(item.headerValue),
                  );
                },
                body: Container(
                  width: double.infinity,
                  padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
                  decoration: const BoxDecoration(
                    border: Border(
                      left: BorderSide(color: Colors.grey.shade300),
                      right: BorderSide(color: Colors.grey.shade300),
                      bottom: BorderSide(color: Colors.grey.shade300),
                    ),
                  ),
                  child: Text(item.expandedValue),
                ),
                isExpanded: item.isExpanded,
              );
            }).toList(),
          ),
        ),
      ),
    );
  }
}

class Item {
  Item({
    required this.headerValue,
    required this.expandedValue,
    this.isExpanded = false,
  });

  String headerValue;
  String expandedValue;
  bool isExpanded;
}

关键细节说明 #

• 关闭默认样式：设置ExpansionPanelList的elevation: 0，彻底移除自带的阴影和默认边框。
• 自定义边框布局：给header和body分别添加Container，通过width: double.infinity强制铺满宽度；注意边框衔接，比如header加完整边框，body只保留左、右、下边框，避免重复线条。
• 间距控制：外层Container的margin控制整个面板列表与屏幕边缘的距离，内部Container的padding调整内容与边框的间距。

替代方案（完整单边框面板） #

如果希望展开后的header+body是一个完整的边框容器，可以隐藏默认header，在body里自定义包含箭头的完整结构：

// 简化示例
ExpansionPanel(
  headerBuilder: (context, isExpanded) => const SizedBox.shrink(),
  body: Container(
    decoration: BoxDecoration(
      border: Border.all(color: Colors.grey.shade300),
      borderRadius: BorderRadius.circular(4),
    ),
    child: Column(
      children: [
        Padding(
          padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              const Text('面板标题'),
              Icon(isExpanded ? Icons.expand_less : Icons.expand_more),
            ],
          ),
        ),
        if (isExpanded)
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
            child: const Text('展开内容'),
          ),
      ],
    ),
  ),
  isExpanded: item.isExpanded,
)

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