Flutter：无需使用Scaffold时，如何解决Expanded组件导致的UI异常？

问题根源很明确：Expanded必须在有确定尺寸约束的Flex组件（Row/Column/Flex）下才能正常工作。Scaffold的body会自动填充整个屏幕空间，给内部的Flex组件提供了明确的尺寸上限；一旦移除Scaffold，根组件没有了约束，Flex会默认尝试包裹子组件内容，Expanded也就没办法分配剩余空间，自然会布局混乱。

下面是几个可行的替代方案：

1. 给根组件添加强制尺寸约束 #

用ConstrainedBox或Container手动设置根组件的尺寸为屏幕大小，模拟Scaffold body的行为：

@override
Widget build(BuildContext context) {
  return ConstrainedBox(
    constraints: BoxConstraints(
      minWidth: MediaQuery.of(context).size.width,
      minHeight: MediaQuery.of(context).size.height,
    ),
    child: Column(
      children: [
        Expanded(child: Container(color: Colors.red)), // 正常占满剩余空间
        Container(height: 50, color: Colors.blue),
      ],
    ),
  );
}

2. 使用LayoutBuilder获取父级约束 #

LayoutBuilder可以拿到父组件传递的约束信息，用它作为根组件，内部的Flex就能正确识别可用空间：

@override
Widget build(BuildContext context) {
  return LayoutBuilder(
    builder: (context, constraints) {
      return SizedBox(
        width: constraints.maxWidth,
        height: constraints.maxHeight,
        child: Row(
          children: [
            Container(width: 100, color: Colors.green),
            Expanded(child: Container(color: Colors.yellow)), // 填充剩余宽度
          ],
        ),
      );
    },
  );
}

3. 结合SingleChildScrollView处理滚动场景 #

如果你的布局需要支持滚动，直接用SingleChildScrollView替代Scaffold的body，同时给内部的Flex组件设置固定高度（或者用MediaQuery匹配屏幕）：

@override
Widget build(BuildContext context) {
  return SingleChildScrollView(
    child: SizedBox(
      height: MediaQuery.of(context).size.height,
      child: Column(
        children: [
          Expanded(child: Container(color: Colors.orange)),
          Container(height: 70, color: Colors.purple),
        ],
      ),
    ),
  );
}

注意：如果不需要滚动，尽量用前两种方案，避免ScrollView带来的额外性能开销。

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