Flutter中Column组件内自定义ShimmerContainer无法正确左对齐问题

• Flutter中Column的crossAxisAlignment对齐规则基于Column自身的宽度计算，而非父容器或屏幕宽度。
• 初始代码中所有ShimmerContainer的宽度都是固定值，此时Column的水平宽度会自动收缩到和子元素的最大宽度一致。在宽度和子元素完全相同的容器内，CrossAxisAlignment.start和CrossAxisAlignment.center视觉上不会有差异，你看到的「居中对齐」实际上是Column整体在外层父容器中居中导致的。
• 当你给任意一个子元素套上Align组件后，Align默认会尽可能撑满父级（也就是Column）的可用水平宽度，此时Column的宽度会被拉伸到父级允许的最大水平宽度，crossAxisAlignment.start就会正式生效，所有子元素都会按照规则左对齐。

你只需要强制Column占满可用的水平宽度即可让对齐规则正常生效，修改Column外层代码如下：

// 给Column加一层Container，指定宽度为无穷大，强制占满水平空间
Container(
  width: double.infinity,
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      ShimmerContainer(
        height: 50,
        width: 200,
      ),
      ShimmerContainer(
        height: 50,
        width: 200,
      ),
      ShimmerContainer(
        height: 50,
        width: 200,
      )
    ],
  ),
)

如果不想让Column占满全部水平宽度，也可以自行指定固定宽度代替double.infinity，只要宽度大于ShimmerContainer的宽度，对齐规则就会生效。

你自定义的ShimmerContainer代码本身没有问题，不需要修改。

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