如何移除ExpansionPanelList中展开ExpansionPanel间的间距

以下是ExpansionPanelList的基础示例代码：

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: const MyStatefulWidget(),
      ),
    );
  }
}

// 存储ExpansionPanel状态信息
class Item {
  Item({
    required this.expandedValue,
    required this.headerValue,
    this.isExpanded = false,
  });

  String expandedValue;
  String headerValue;
  bool isExpanded;
}

List<Item> generateItems(int numberOfItems) {
  return List<Item>.generate(numberOfItems, (int index) {
    return Item(
      headerValue: 'Panel $index',
      expandedValue: 'This is item number $index',
    );
  });
}

class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({Key? key}) : super(key: key);

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  final List<Item> _data = generateItems(8);

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Container(
        child: _buildPanel(),
      ),
    );
  }

  Widget _buildPanel() {
    return ExpansionPanelList(
      expansionCallback: (int index, bool isExpanded) {
        setState(() {
          _data[index].isExpanded = !isExpanded;
        });
      },
      children: _data.map<ExpansionPanel>((Item item) {
        return ExpansionPanel(
          headerBuilder: (BuildContext context, bool isExpanded) {
            return ListTile(
              title: Text(item.headerValue),
            );
          },
          body: ListTile(
              title: Text(item.expandedValue),
              subtitle:
                  const Text('To delete this panel, tap the trash can icon'),
              trailing: const Icon(Icons.delete),
              onTap: () {
                setState(() {
                  _data.removeWhere((Item currentItem) => item == currentItem);
                });
              }),
          isExpanded: item.isExpanded,
        );
      }).toList(),
    );
  }
}

运行上述代码可观察到，Panel 0与Panel 1、Panel 1与Panel 2之间存在灰色间距，该间距支持移除，不同Flutter版本的实现方式如下：

移除间距实现方法 #

Flutter 3.10及以上稳定版（推荐） #

该版本官方已开放间距配置属性，无需修改框架源码，直接给ExpansionPanelList追加对应配置即可完全移除间距：

• 设置gapBetweenPanels: 0：将面板间默认4px的空隙高度设为0
• 设置dividerColor: Colors.transparent：隐藏面板间的默认分隔线
• 可选配置：给每个ExpansionPanel设置elevation: 0，去掉面板展开时的阴影抬升效果

修改后的_buildPanel方法代码如下：

Widget _buildPanel() {
  return ExpansionPanelList(
    // 移除面板间距核心配置
    gapBetweenPanels: 0,
    dividerColor: Colors.transparent,
    expansionCallback: (int index, bool isExpanded) {
      setState(() {
        _data[index].isExpanded = !isExpanded;
      });
    },
    children: _data.map<ExpansionPanel>((Item item) {
      return ExpansionPanel(
        // 可选：移除展开阴影
        elevation: 0,
        headerBuilder: (BuildContext context, bool isExpanded) {
          return ListTile(
            title: Text(item.headerValue),
          );
        },
        body: ListTile(
            title: Text(item.expandedValue),
            subtitle:
                const Text('To delete this panel, tap the trash can icon'),
            trailing: const Icon(Icons.delete),
            onTap: () {
              setState(() {
                _data.removeWhere((Item currentItem) => item == currentItem);
              });
            }),
        isExpanded: item.isExpanded,
      );
    }).toList(),
  );
}

Flutter 3.10以下旧版本 #

旧版本没有开放gapBetweenPanels配置入口，不建议魔改框架源码，优先升级到官方稳定版即可使用上述原生配置实现无间距效果。如果暂时无法升级，可以通过嵌套Container反向补偿边距的方式临时适配，但稳定性不如官方原生配置。

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