Flutter技术问题：尝试绘制宽度为100的列但无法正常显示

嘿，我看你这布局的问题主要出在容器高度设置和组件尺寸约束上，咱们直接来修正代码，同时解释每个改动的原因：

问题分析 #

1. 左侧红色容器用了固定高度947，没法自适应不同屏幕尺寸，一旦父组件高度不足就会显示异常；
2. 右侧蓝色容器没有设置高度，导致没有可见区域，自然就显示不出来；
3. 用Flexible来实现固定宽度列有点绕，直接用SizedBox限定宽度会更直观清晰。

修正后的代码 #

return Scaffold(
  backgroundColor: Colors.teal,
  body: Row(
    children: [
      // 左侧固定宽度的红色列
      SizedBox(
        width: 100,
        child: Column(
          mainAxisSize: MainAxisSize.max, // 让Column占满Row的高度
          children: [
            Container(
              height: double.infinity, // 自适应父级高度
              color: Colors.red,
            ),
          ],
        ),
      ),
      // 中间占满剩余空间的区域，放置黄、绿方块
      Expanded(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              width: 100,
              height: 100,
              color: Colors.yellow,
            ),
            SizedBox(height: 20), // 给两个方块加个间距，优化视觉效果
            Container(
              width: 100,
              height: 100,
              color: Colors.green,
            ),
          ],
        ),
      ),
      // 右侧固定宽度的蓝色列
      SizedBox(
        width: 100,
        child: Column(
          mainAxisSize: MainAxisSize.max,
          children: [
            Container(
              height: double.infinity, // 自适应父级高度
              color: Colors.blue,
            ),
          ],
        ),
      ),
    ],
  ),
);

关键改动说明 #

• 用SizedBox(width:100)直接限定左右列的宽度，替代Flexible，更贴合固定宽度的需求；
• 给左右列的Column设置mainAxisSize: MainAxisSize.max，确保它能占满所在Row的高度；
• 把左右容器的高度改成double.infinity，让它们自适应父组件高度，适配不同屏幕；
• 给中间的两个方块加了SizedBox(height:20)的间距，让布局更协调（可选优化项）。

这样修改后，左右各100宽度的红、蓝列就能正常显示，中间的黄、绿方块也能居中在剩余空间里啦～

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