如何解决Flutter桌面应用Row组件的RenderFlex溢出错误？

要实现窗口缩至极小时自动裁剪内容而非触发溢出错误，你可以通过ClipRect + LayoutBuilder的组合来处理，既满足左侧固定宽度、右侧自适应的布局需求，又能在窗口尺寸不足时裁剪超出部分：

修改后的代码 #

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: ClipRect(
          child: LayoutBuilder(
            builder: (context, constraints) {
              return Row(
                mainAxisSize: MainAxisSize.min,
                children: [
                  // 左侧固定宽度面板
                  Container(
                    width: 400,
                    child: Placeholder(),
                  ),
                  // 右侧内容面板：根据父容器宽度计算可用空间，不足时设为0
                  Container(
                    width: constraints.maxWidth > 400 
                        ? constraints.maxWidth - 400 
                        : 0,
                    child: Placeholder(),
                  )
                ],
              );
            },
          ),
        ),
      ),
    );
  }
}

方案说明 #

• ClipRect：负责裁剪超出父容器边界的内容，确保窗口缩小时不会显示溢出的部分。
• LayoutBuilder：获取父容器的实时尺寸约束，动态计算右侧面板的宽度——当父容器宽度大于400时，右侧占剩余空间；小于400时，右侧宽度设为0，避免强行挤压导致溢出。
• mainAxisSize: MainAxisSize.min：让Row的宽度由子组件总宽度决定，而非强行占满父容器，配合ClipRect实现裁剪效果。

如果你需要保留示例中的Expanded组件，也可以用SingleChildScrollView + ClipRect的组合，通过禁止滚动来实现裁剪：

body: ClipRect(
  child: SingleChildScrollView(
    scrollDirection: Axis.horizontal,
    physics: NeverScrollableScrollPhysics(), // 禁止滚动
    child: Row(
      children: [
        Container(width: 400, child: Placeholder()),
        Expanded(child: Placeholder()),
      ],
    ),
  ),
)

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