Flutter中使用Expanded的Column子部件间距过大如何解决

间隙原因结论 #

你遇到的Column子项之间的大间隙确实是Expanded导致的。
Column属于弹性布局容器，Expanded的作用是抢占父级Flex容器（包括Column、Row、Flex）的全部剩余可用空间。你当前代码中，Column的第一个SizedBox固定高度220，第三个GestureDetector总高度为图片高度加内边距共86，其余屏幕剩余高度全部被套了Expanded的Row占据，Row高度被强行撑大，自然就把上下两个子项撑开形成了大间隙。

Expanded适用场景 #

• 需要单个子组件占满Flex容器内所有剩余空间时使用，比如页面顶部为固定高度的导航栏，剩余区域需要全屏展示列表，即可给列表部件套Expanded
• 多个子组件需要按比例分配Flex容器剩余空间时使用，给多个子部件分别套不同flex属性的Expanded，即可按flex值的比例瓜分剩余空间，例如两个Expanded分别设置flex:1和flex:2，就会按1:2的比例分配剩余可用空间。

本场景解决方案 #

你当前的Row仅需要适配内部70高度的图片，不需要占据额外空间，直接删除包裹Row的Expanded部件即可。如果需要控制Row和上下组件的间距，可自行在对应位置插入指定高度的SizedBox或者添加Padding设置固定间距即可。
修改后核心代码参考：

return Scaffold(
  body: Column(
    children: <Widget>[
      SizedBox(height: 220,),
      // 移除外层Expanded，直接保留Row
      Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          GestureDetector(
            onTap: () {
              setState(() {});
            },
            child: Container(
              child: Image.network(
                'https://picsum.photos/250?image=9', height: 70, width: 70),
            ),
          ),
          GestureDetector(
            onTap: () {
              setState(() {});
            },
            child: Image.network('https://picsum.photos/250?image=9', height: 70, width: 70),
          ),
        ],
      ),
      // 可在此处插入SizedBox设置Row和下方组件的固定间距
      // SizedBox(height: 20,),
      GestureDetector(
        onTap: () {
          setState(() {});
        },
        child: Container(
          padding: const EdgeInsets.all(8),
          child: Image.network('https://picsum.photos/250?image=9', height: 70, width: 70),
        ),
      ),
    ],
  ),
);

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