Flutter中CircularProgressIndicator继承祖父Widget宽度问题求助

问题核心在于外层SizedBox(width:200)的默认布局行为：它会强制子组件填充自身的宽度空间，导致你内层设置的SizedBox(width:10)宽度约束被覆盖，最终组件呈现200x10的尺寸。即使换成Container+BoxDecoration，也会因为同样的布局约束传递问题出现相同现象。

以下两种方案都能在保留外层SizedBox的前提下解决问题：

方案一：给外层SizedBox添加对齐属性 #

通过设置alignment，让外层SizedBox不再强制子组件拉伸，而是按子组件自身尺寸对齐展示：

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return const SizedBox(
        width: 200,
        alignment: Alignment.center, // 关键：指定对齐方式
        child: SizedBox(
            width: 10, height: 10, child: CircularProgressIndicator()));
  }
}

方案二：用Align/Center包裹内层组件 #

通过Center或Align组件拦截布局约束，让内层组件保持自身尺寸：

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return const SizedBox(
        width: 200,
        child: Center( // 用Center包裹内层组件，解除拉伸约束
          child: SizedBox(
              width: 10, height: 10, child: CircularProgressIndicator()),
        ));
  }
}

原理说明：Flutter的布局约束是自上而下传递的，外层SizedBox原本给子组件的约束是"宽度必须等于200"，而添加对齐属性或使用Align/Center后，约束会被修改为"子组件可使用自身尺寸，然后在父容器内对齐"，这样内层10x10的尺寸设置就能正常生效。

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