Flutter中AlignTransition在Column组件失效，Stack中正常问题排查

我发现AlignTransition组件在Flutter的Column布局中无法正常工作，但在Stack布局中可以正常运行，无法明确导致Column中失效的具体原因。

问题代码示例 #

Column布局代码：

Column(
    children: [
      Visibility(
          visible: controller.isWelcomeHeader ? false : true,
          child: const QuestionHeader()),
      AlignTransition(
        alignment: controller.animation,
        child: SizedBox(
          height: ScreenUtil.screenHeight - marginQuestion,
          width: ScreenUtil.screenWidth,
          child: const Question(),
        ),
      ),
    ],
  );

Stack布局代码：

Stack(
    children: [
      Visibility(
          visible: controller.isWelcomeHeader ? false : true,
          child: const QuestionHeader()),
      AlignTransition(
        alignment: controller.animation,
        child: SizedBox(
          height: ScreenUtil.screenHeight - marginQuestion,
          width: ScreenUtil.screenWidth,
          child: const Question(),
        ),
      ),
    ],
  );

失效原因分析 #

• Column默认纵向排列子组件，每个子组件的可用空间由自身内容和Column的约束决定。如果没有特殊设置，AlignTransition在Column中只会获得刚好包裹子组件的空间，没有多余空间执行对齐动画，自然看不到效果。
• Stack的布局逻辑是所有子组件堆叠在同一容器内，每个子组件默认可以使用Stack的全部空间，AlignTransition能基于整个Stack的范围（也就是你设置的屏幕大小）调整子组件位置，所以动画正常。

解决办法 #

要让AlignTransition在Column中正常工作，需要确保它拥有足够的可用空间来执行动画，调整代码如下：

Column(
  mainAxisSize: MainAxisSize.max, // 让Column占满父容器的全部高度
  children: [
    Visibility(
        visible: controller.isWelcomeHeader ? false : true,
        child: const QuestionHeader()),
    Expanded( // 让AlignTransition占据Column剩余的所有空间
      child: AlignTransition(
        alignment: controller.animation,
        child: SizedBox(
          height: ScreenUtil.screenHeight - marginQuestion,
          width: ScreenUtil.screenWidth,
          child: const Question(),
        ),
      ),
    ),
  ],
);

内容的提问来源于stack exchange，提问作者M.ArslanKhan