FittedBox包裹Row后mainAxisAlignment属性失效是什么原因？

问题根因 #

MainAxisAlignment.spaceEvenly生效的核心前提是 Row 在水平主轴上拥有超过子元素总宽度的可用空间，剩余空间才会被按照规则分配到子元素之间。而你的代码触发了下面的布局逻辑导致没有剩余空间：

1. FittedBox 对子组件的布局约束是「无边界约束」：它会先允许子组件完全按照自身内容尺寸计算大小，不会限制子组件的最大宽高。
2. 你的 Row 没有被施加任何固定宽度约束，在无边界的水平约束下，Row 会直接收缩到和两个 Text 的总宽度完全相等，根本没有多余的剩余空间可以分配，spaceEvenly 属性自然不会生效，两个 Text 就会紧贴在一起。
3. 后续 FittedBox 只是把这个已经紧贴的 Row 整体缩放适配父容器的尺寸，不会改变子元素之间的相对位置。

修复示例 #

如果要实现均匀分布的效果，只需要主动给 Row 设置固定宽度，让它有足够的剩余空间分配即可：

Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Container(
          height: 20,
          width: double.infinity,
          child: FittedBox(
            fit: BoxFit.fill,
            child: SizedBox(
              // 主动指定Row的宽度和屏幕宽度一致，创造可用的剩余空间
              width: MediaQuery.of(context).size.width,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  Text('THis is the thing'),
                  Text('THis is another thing'),
                ],
              ),
            ),
          ),
        )
    );
}

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