Flutter中Flexible组件无法实现3:7比例布局的原因咨询

你的3:7比例失效，核心原因是Flexible默认的fit属性为FlexFit.loose：这个属性的行为是子组件会优先使用自身的最小必要空间，只有当Row存在额外剩余空间时，才会按flex比例分配剩余空间。如果你的两个子组件（左边的Text容器、右边的MyStatefulWidget容器）本身的最小尺寸已经占满了Row的总宽度，flex比例自然不会生效。

解决方法 #

直接使用Expanded组件替代Flexible即可——因为Expanded本质就是fit: FlexFit.tight的Flexible，它会强制子组件填充分配到的flex比例空间，严格遵守3:7的宽度分配。

修改后的代码：

body: Container(
  child: Row(
    children: [
      Expanded(
        flex: 3,
        child: Container(
          color: Colors.lightGreenAccent,
          child: Text("Hi, Lynn", style: TextStyle(fontSize: 30)),
        ),
      ),
      Expanded(
        flex: 7,
        child: Container(
          color: Colors.blue,
          child: const MyStatefulWidget(),
        ),
      ),
    ],
  ),
)

如果你一定要用Flexible，也可以手动设置fit: FlexFit.tight，效果和Expanded完全一致：

Flexible(
  flex: 3,
  fit: FlexFit.tight, // 关键设置
  child: Container(...),
)

补充说明 #

• FlexFit.loose：子组件的尺寸不会超过自身的固有大小，适合需要保留子组件原始尺寸，同时允许在空间不足时缩小的场景。
• FlexFit.tight：强制子组件占满分配到的flex空间，这是实现固定比例布局的必要设置。

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