Flutter中如何设置Expanded或Flex组件的最大尺寸？

问题核心在于Flexible会给子组件传递“可占满剩余可用空间”的约束，导致Container自身的maxWidth被覆盖，无法生效。你需要把ConstrainedBox作为Flexible的直接子组件，让它先拦截并修改Flexible传递的约束，再传给内部的Container。

修改后的代码：

Row(
  children: [
    Container(
      decoration: const BoxDecoration(color: Colors.red),
      child: const SizedBox(height: 30, width: 50),
    ),
    Flexible(
      // 使用ConstrainedBox来限制最大宽度
      child: ConstrainedBox(
        constraints: const BoxConstraints(minWidth: 50, maxWidth: 100),
        child: Container(
          decoration: const BoxDecoration(color: Colors.blue),
          child: const SizedBox(height: 30),
        ),
      ),
    ),
    Container(
      decoration: const BoxDecoration(color: Colors.green),
      child: const SizedBox(height: 30, width: 50),
    ),
  ],
),

为什么这样有效？ #

• Flexible的作用是让子组件在剩余空间内伸缩，但它传递给子组件的约束是maxWidth = 剩余空间宽度，这会直接覆盖Container自身的maxWidth设置。
• 用ConstrainedBox作为Flexible的直接子组件后，它会合并Flexible的约束和自身的约束：最终子组件的最大宽度会取Flexible给出的剩余空间和ConstrainedBox的maxWidth中较小的那个，这样既保留了Flexible的伸缩能力，又实现了最大宽度的限制。

如果你的需求是组件在空间充足时固定最大宽度，空间不足时缩小到最小宽度，这个方案完全适用。

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