Flutter桌面端Chrome浏览器底部溢出问题求助

你的问题出在布局约束的冲突上，桌面端屏幕宽度更大，这些冲突会被放大，最终导致底部溢出。以下是具体的修复方案：

问题根源 #

1. AspectRatio与固定height冲突：你在AspectRatio的子Container里设置了height:250，但AspectRatio本身会根据父容器宽度和16/9比例自动计算高度，固定height会让这个区域在宽屏时高度超出预期，挤压下方ListView的可用空间。
2. ListView的shrinkWrap设置不当：已经用Expanded给ListView分配了剩余空间，再设置shrinkWrap: true会让ListView试图包裹所有内容，而不是利用Expanded提供的滚动空间，内容较多时就会触发溢出。

修复后的代码 #

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black54,
      appBar: AppBar(
        title: const Text('D E S K T O P'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Row(
          children: [
            // First Column
            Expanded(
              child: Column(
                children: [
                  // Youtube Video
                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: AspectRatio(
                      aspectRatio: 16 / 9,
                      child: Container(
                        // 移除固定height，让AspectRatio自动计算高度
                        color: Colors.redAccent,
                      ),
                    ),
                  ),

                  // Comment Section & Recommended Videos
                  Expanded(
                    flex: 8,
                    child: ListView.builder(
                        // 移除shrinkWrap: true，默认false即可，让ListView使用Expanded分配的空间
                        itemCount: 8,
                        itemBuilder: (context, index) {
                          return Padding(
                            padding: const EdgeInsets.all(8.0),
                            child: Container(
                              color: Colors.black54,
                              height: 120,
                            ),
                          );
                        }),
                  )
                ],
              ),
            ),

            // Second Column
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Container(
                width: 200,
                color: Colors.black54,
              ),
            )
          ],
        ),
      ),
    );
  }
}

额外优化（可选） #

如果需要在移动端给视频区域设置最小高度，避免窄屏时视频区域过矮，可以用MinBox包裹AspectRatio：

MinBox(
  minHeight: 250,
  child: AspectRatio(
    aspectRatio: 16/9,
    child: Container(color: Colors.redAccent),
  ),
)

这样既保证桌面端布局不会溢出，又能在移动端维持视频区域的最低高度。

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