如何让Flutter中SizedBox/Container高度随子组件内容动态变化？

问题拆解 #

你当前布局里，上方的Expanded已经让地图组件占满了剩余空间，下方的BookingStatusWidget被固定高度的SizedBox限制住了，想让它能跟着内容自动调整高度。之前用Expanded或Flexible会撑满多余空间，是因为这俩组件本身就是用来分配剩余空间的，根本不是做自适应内容高度的。

直接可行的方案 #

把固定高度的SizedBox直接删掉，让BookingStatusWidget自己决定高度就行：

const Column(
  children: [
    // 地图区域，占满剩余空间
    Expanded(
      child: GmapWidget(),
    ),

    // 预订状态组件，自适应内容高度
    BookingStatusWidget(),
  ],
),

为啥这么做有用？ #

• Expanded会强制地图组件占据Column内所有可用的剩余空间，下方的BookingStatusWidget就只会占用自身内容所需的高度，不会被额外拉伸。
• 如果BookingStatusWidget内部有可能导致无限增高的组件（比如嵌套的无约束Column），得给内部组件加对约束：比如滚动组件设置shrinkWrap: true，必要时可以用IntrinsicHeight包裹（注意这个组件会影响性能，能不用就不用）。

避坑提醒 #

• 别再用Flexible或Expanded包裹BookingStatusWidget，这俩就是用来分配剩余空间的，和自适应内容高度完全不搭。
• 如果组件内容是动态变化的（比如有展开/收起的内容），要确保内部子组件能正确计算高度，比如用Wrap代替可能溢出的Column，或者给滚动组件设置合适的约束。

内容的提问来源于stack exchange，提问作者Charles Angelo Lim