Flutter：如何为ExpansionPanelList的ExpansionPanel添加间距

要给ExpansionPanelList中的ExpansionPanel添加间距并替代默认分隔线，按以下步骤修改代码即可：

1. 隐藏默认分隔线 #

将ExpansionPanelList的dividerColor设置为透明，彻底移除默认分隔线：

dividerColor: Colors.transparent,

2. 为每个面板添加间距 #

由于ExpansionPanel本身不支持margin属性，我们可以通过给面板的header和body容器添加外边距实现间距效果，同时将ExpansionPanel的背景色设为透明，让内部容器的样式和间距显现：

修改devices.map生成ExpansionPanel的代码：

return ExpansionPanel(
  // 将面板自身背景设为透明，让内部容器的样式生效
  backgroundColor: Colors.transparent,
  headerBuilder: (BuildContext context, bool isExpanded) {
    return Container(
      // 自定义上下左右间距，数值可按需调整
      margin: const EdgeInsets.symmetric(horizontal: 10, vertical: 5),
      decoration: BoxDecoration(
        // 原面板背景色移至此处
        color: Color.fromARGB(106, 44, 52, 83),
        // 可选：添加圆角提升视觉效果
        borderRadius: BorderRadius.circular(8),
      ),
      child: ListTile(
        // 原有ListTile内容保持不变
        title: Row(
          children: [
            Text(
              device.name,
              style: TextStyle(color: Colors.white),
            ),
            Spacer(),
            IconButton(
              icon: Icon(Icons.edit, color: Colors.white),
              onPressed: () {
                // 原有编辑弹窗逻辑保留
              },
            ),
          ],
        ),
        onTap: () {
          setState(() {
            device.isExpanded = !isExpanded;
          });
        },
      ),
    );
  },
  body: Container(
    // 保持和header一致的水平间距，添加底部间距
    margin: const EdgeInsets.symmetric(horizontal: 10, vertical: 5),
    decoration: BoxDecoration(
      // 原body背景色移至此处
      color: Color.fromARGB(64, 44, 52, 83),
      borderRadius: BorderRadius.circular(8),
    ),
    child: ListTile(
      // 原有body的ListTile内容保持不变
      title: Text(
        device.lastOnline,
        style: TextStyle(color: Colors.white),
      ),
      subtitle: Text(
        device.ipAddress,
        style: TextStyle(color: Colors.white),
      ),
      trailing: Icon(
        Icons.delete,
        color: Color.fromARGB(199, 255, 43, 50),
      ),
      onTap: () {
        setState(() {
          devices.removeWhere(
              (Device currentdevice) => device == currentdevice);
        });
      },
    ),
  ),
  isExpanded: device.isExpanded ?? false,
);

3. 可选优化：调整整体内边距 #

给ExpansionPanelList的父容器添加padding，让内容和屏幕边缘保持合适距离：

Container(
  padding: const EdgeInsets.symmetric(vertical: 8),
  child: ExpansionPanelList(
    // 原有ExpansionPanelList属性保留
  ),
)

修改后，每个ExpansionPanel之间会形成明显的间距，完全替代默认分隔线，同时保留ExpansionPanelList的原生功能，无需更换组件。

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