Flutter中设置Align center后Container仍靠左无法居中问题排查

问题根因 #

• Flutter布局遵循「父组件约束子组件，子组件决定自身尺寸」的规则，Row默认传递给子组件的横向约束是无上限，因此你写的Align组件没有外层强制宽度约束时，会自动收缩宽度匹配它的子Container（仅250宽度）。你设置的alignment: Alignment.center是在Align自身的250宽度范围内生效，自然不会出现视觉上的居中效果，Container始终靠在Row的起始位置。

解决方案 #

方案1：给Align套Expanded组件 #

Expanded会强制子组件占满Row的剩余横向空间，此时Align的宽度等于Row的可用宽度，居中对齐就会正常生效：

Row(
  children: <Widget>[
    Expanded(
      child: Align(
        alignment: Alignment.center,
        child: Container(
          width: 250,
          color: Colors.grey,
          padding: const EdgeInsets.all(3.0),
          child: FittedBox(
            fit: BoxFit.contain,
            child: PostBody(),
          ),
        ),
      )
    )
  ],
)

方案2：直接设置Row的主轴对齐 #

如果当前Row只有这一个子组件，不需要额外套Align，直接配置Row的主轴对齐属性即可实现居中：

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    Container(
      width: 250,
      color: Colors.grey,
      padding: const EdgeInsets.all(3.0),
      child: FittedBox(
        fit: BoxFit.contain,
        child: PostBody(),
      ),
    )
  ],
)

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