Flutter中Expanded组件不可见问题的排查与修复

一、Linux平台绿色容器显示异常问题 #

现象 #

在Row中使用带flex的Expanded组件时，绿色容器显示为黑色，拖动窗口切换桌面时会在白/黑之间闪烁，且Expanded与Flexible的任意组合都无法解决该问题。

原因 #

这是Linux平台Flutter Skia渲染层的画布刷新bug：当容器仅设置背景色但没有子元素填充空间时，窗口状态变化（如切换桌面）会触发重绘异常，导致背景色无法正确渲染。组件检查器显示尺寸正常，说明布局计算无问题，问题出在渲染阶段。

修复方案 #

通过强制容器触发正确重绘即可解决，两种可选方法：

1. 给绿色容器添加最小尺寸约束，让渲染层识别到需要绘制的区域：

Widget green = Container(
  color: Colors.green,
  constraints: const BoxConstraints(minWidth: 1, minHeight: 1),
);

2. 在容器内添加一个填充子元素，强制占满容器空间：

Widget green = Container(
  color: Colors.green,
  child: const SizedBox.expand(),
);

二、黄色容器尺寸疑问解答 #

现象 #

移除红色容器后，绿色容器内的黄色Container设置了width:50, height:50，但视觉上似乎没有保持固定尺寸。

原因 #

Expanded的默认fit属性为FlexFit.tight，会强制子组件（绿色Container）填充Row分配的全部可用空间。绿色Container的宽度由Expanded决定，不受内部黄色Container的尺寸影响；黄色Container的固定宽高是生效的，只是它在绿色Container内部居中显示，绿色的背景色覆盖了剩余空间，导致视觉上产生误解。

验证方式 #

给黄色Container添加边框即可清晰看到它的实际固定尺寸：

Container(
  width: 50,
  height: 50,
  color: Colors.yellow,
  decoration: BoxDecoration(border: Border.all(color: Colors.black, width: 2)),
)

与第一个问题的关联 #

两个问题无直接关联：第一个是Linux平台的渲染bug，第二个是Expanded布局约束规则导致的视觉误解。

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