Flutter如何减小ExpansionTile与相邻Image组件的间距

在Flutter开发中展示内部包含文本内容的ExpansionTile组件，在该组件下方放置Image组件时，两个widget之间存在多余间距，需要减小这部分间距。

问题参考截图：

复现问题的原始代码：

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: backGround,
        appBar: AppBar(
          title: const Text('Aromatics'),
          backgroundColor: appbarColor,
        ),
        body: Column(
          children: [
            ExpansionTile(
                iconColor: titleColor,
                title: const Text('Tst', style: TextStyle(color: titleColor)),
                subtitle: const Text('Test subtitle',
                    style: TextStyle(color: Colors.white)),
                children: [
                  Container(
                    margin: const EdgeInsets.only(left: 20),
                    child: Column(
                      children: const [
                        Text('Test text',
                            style:
                                TextStyle(color: Colors.white, fontSize: 13)),
                      ],
                    ),
                  ),
                ]),
            const SizedBox(
              height: 1,
            ),
            Expanded(
              child: Image.asset('assets/images/test.webp'),
            ),
          ],
        ));
  }
}

多余间距来自三个部分：

• ExpansionTile组件默认内置了垂直方向的标题内边距、展开子区域的底部内边距
• 代码中手动添加的SizedBox(height: 1)也贡献了额外间距
• 若上述边距清理后仍有视觉间距，是因为Expanded拉伸了图片容器，图片默认居中对齐，当图片比例和容器不匹配时，上下会出现空白留白

按以下步骤调整即可消除多余间距：

1. 删除ExpansionTile和Image之间多余的const SizedBox(height: 1)组件
2. 给ExpansionTile配置边距参数，清除默认内置垂直边距：
   • 设置tilePadding: const EdgeInsets.symmetric(horizontal: 16.0)，移除标题区域默认的上下内边距
   • 设置childrenPadding: EdgeInsets.zero，移除展开子内容区域默认的底部内边距
   • 可按需设置minTileHeight: 0，进一步压缩标题区域的最小垂直占用
3. 给下方的Image.asset配置对齐和适配规则，设置alignment: Alignment.topCenter让图片靠上贴合上方组件，同时设置fit: BoxFit.fitWidth让图片宽度撑满容器，避免比例不匹配导致的上下留白

修复后的核心代码示例：

body: Column(
  children: [
    ExpansionTile(
        iconColor: titleColor,
        // 清除标题区域默认上下内边距
        tilePadding: const EdgeInsets.symmetric(horizontal: 16.0),
        // 清除子内容区域默认内边距
        childrenPadding: EdgeInsets.zero,
        // 可选：压缩标题最小高度
        minTileHeight: 0,
        title: const Text('Tst', style: TextStyle(color: titleColor)),
        subtitle: const Text('Test subtitle',
            style: TextStyle(color: Colors.white)),
        children: [
          Container(
            margin: const EdgeInsets.only(left: 20),
            child: Column(
              children: const [
                Text('Test text',
                    style:
                        TextStyle(color: Colors.white, fontSize: 13)),
              ],
            ),
          ),
        ]),
    Expanded(
      child: Image.asset(
        'assets/images/test.webp',
        // 图片靠上对齐
        alignment: Alignment.topCenter,
        // 宽度撑满容器适配
        fit: BoxFit.fitWidth,
      ),
    ),
  ],
)

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