Flutter Column组件未添加间距时子元素间存在多余空白如何解决

两个Text外层包裹的Expanded组件是产生多余间距的直接原因，和mainAxisAlignment配置无关。
Expanded会强制子组件占满Column垂直主轴方向的剩余可用空间，两个同时使用时会默认平分Column的全部垂直高度。即使Text本身内容很短，也会占据分到的一半垂直空间，两个布局区域之间自然就出现了大段空白，此时mainAxisAlignment的对齐规则会被Expanded的撑满逻辑覆盖，不会生效。

根据你的布局需求选对应方案即可：

• 不需要Column撑满父容器全高：直接移除两个Text外层的Expanded包裹，原有mainAxisAlignment: MainAxisAlignment.center配置会正常生效，两个Text会按实际内容高度排布，整体在Column内垂直居中，不会出现多余空白。
  修改后对应Column部分的代码如下：

child: Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget> [
    Text(
      quotationToDisplay,
      style: const TextStyle(
        fontFamily: "Bangers",
        fontSize: 26.0,
        backgroundColor: Colors.red
      ),
    ),
    Text(
      authorToDisplay,
      style: const TextStyle(
        fontSize: 23.0,
        backgroundColor: Colors.yellow
      ),
    )
  ],
),

• 确实需要Column撑满父容器全高：不要给文本类内容组件套Expanded，可以在需要留白的位置单独使用Spacer或者空Expanded来控制间距，避免Text组件本身占据多余的空白空间。

内容的提问来源于stack exchange，提问作者sweet-pineapple