Flutter寿司应用横屏时出现Bottom Overflowed by 143 pixels问题求助

问题分析 #

横屏时屏幕高度大幅降低，布局内容总高度超过可用屏幕高度，导致出现Bottom Overflowed by 143 pixels的溢出提示；之前按教程操作后界面空白，大概率是错误使用了滚动组件或布局约束冲突（比如在SingleChildScrollView内使用Expanded）。

具体解决方案 #

方案1：添加滚动组件（最直接） #

用SingleChildScrollView包裹页面核心内容，当内容超出屏幕时可滚动，彻底解决溢出问题。注意不要在SingleChildScrollView的直接子组件里用Expanded/Flexible，这类组件需要父组件有确定高度，会导致布局异常空白。

示例代码：

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: const Text('寿司应用')),
    body: SingleChildScrollView(
      padding: const EdgeInsets.symmetric(horizontal: 16),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // 你的原有内容：比如寿司 banner、分类列表、商品卡片等
          const SizedBox(height: 20),
          Image.asset('assets/sushi_header.png', fit: BoxFit.cover),
          const SizedBox(height: 16),
          const Text('热门寿司', style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
          // 更多商品组件...
        ],
      ),
    ),
  );
}

方案2：响应式适配横屏布局 #

如果不想让页面滚动，而是让内容自适应横屏高度，可以通过LayoutBuilder获取屏幕尺寸，动态调整组件大小、布局结构：

示例代码：

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: const Text('寿司应用')),
    body: LayoutBuilder(
      builder: (context, constraints) {
        bool isLandscape = constraints.maxWidth > constraints.maxHeight;
        return Column(
          children: [
            // 横屏时缩小 banner 高度
            Image.asset(
              'assets/sushi_header.png',
              height: isLandscape ? 120 : 220,
              width: double.infinity,
              fit: BoxFit.cover,
            ),
            // 横屏时增加网格列数，减少每行高度
            Expanded(
              child: GridView.count(
                padding: const EdgeInsets.all(12),
                crossAxisCount: isLandscape ? 4 : 2,
                childAspectRatio: isLandscape ? 1.2 : 0.8,
                crossAxisSpacing: 12,
                mainAxisSpacing: 12,
                children: [
                  // 寿司商品卡片组件
                ],
              ),
            ),
          ],
        );
      },
    ),
  );
}

方案3：排查之前的错误操作 #

如果之前修改后界面空白，检查以下几点：

• 移除SingleChildScrollView内部的Expanded/Flexible组件
• 确保SingleChildScrollView的父组件没有设置固定高度（比如Container(height: double.infinity)）
• 检查是否误删了核心内容组件

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