Flutter中Column顶部及底部出现多余边距问题求助

我使用Flutter搭建网站主页，将包含Flexible组件的Column放入Stack中。全屏显示时布局定位正常，但调整屏幕尺寸后，Column无法贴顶，顶部和底部出现小边距。最初使用Row组件时存在类似问题，改为Column嵌套Row后出现当前问题。

相关代码 #

class MainPage extends StatefulWidget {
  const MainPage({Key? key}) : super(key: key);

  @override
  State<MainPage> createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  bool _isLogin = false;
  @override
  Widget build(BuildContext context) {
    // check login
    Future.delayed(Duration.zero, () {
      if (isLogin()) {
        setState(() {
          _isLogin = true;
        });
      } else {
        MovePage(
            context: context,
            routeName: Routes.loginPage,
            generation: Generation());
      }
    });
    if (_isLogin) {
      return Scaffold(
        body: Stack(children: [
            const _OrangeVertical(),
            const _GreenVertical(),
            const _PurpleVertical(),
            const _LogoVertical(),
        ]),
      );
    } else {
      return const Scaffold(
        body: Center(
          child: CircularProgressIndicator(),
        ),
      );
    }
  }
}

class _Logo1920 extends StatelessWidget {
  const _Logo1920();

  @override
  Widget build(BuildContext context) {
    return const FlexibleImage(
      imgPath: 'assets/images/1920_logo.png',
      xFlexesOne: 3,
      xFlexesTwo: 4,
      xFlexesThree: 3,
      yFlexesOne: 325,
      yFlexesTwo: 625,
      yFlexesThree: 735,
    );
  }
}
class _Orange1920 extends StatelessWidget {
  const _Orange1920();

  @override
  Widget build(BuildContext context) {
    return const FlexibleImage(
      imgPath: 'assets/images/1920_orange.png',
      xFlexesOne: 0,
      xFlexesTwo: 1,
      xFlexesThree: 2,
      yFlexesOne: 0,
      yFlexesTwo: 7,
      yFlexesThree: 10,
    );
  }
}

class _Green1920 extends StatelessWidget {
  const _Green1920();

  @override
  Widget build(BuildContext context) {
    return const FlexibleImage(
      imgPath: 'assets/images/1920_green_new.png',
      xFlexesOne: 0,
      xFlexesTwo: 11,
      xFlexesThree: 20,
      yFlexesOne: 11,
      yFlexesTwo: 6,
      yFlexesThree: 0,
    );
  }
}

class _Purple1920 extends StatelessWidget {
  const _Purple1920();

  @override
  Widget build(BuildContext context) {
    return const FlexibleImage(
        imgPath: 'assets/images/1920_purple.png',
        xFlexesOne: 20,
        xFlexesTwo: 11,
        xFlexesThree: 0,
        yFlexesOne: 0,
        yFlexesTwo: 0,
        yFlexesThree: 0);
  }
}

class FlexibleImage extends StatelessWidget {
  final String imgPath;
  final int xFlexesOne;
  final int xFlexesTwo;
  final int xFlexesThree;
  final int yFlexesOne;
  final int yFlexesTwo;
  final int yFlexesThree;

  const FlexibleImage({
    super.key,
    required this.imgPath,
    required this.xFlexesOne,
    required this.xFlexesTwo,
    required this.xFlexesThree,
    required this.yFlexesOne,
    required this.yFlexesTwo,
    required this.yFlexesThree,
  });

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        if (yFlexesOne > 0)
          Flexible(
            flex: yFlexesOne,
            fit: FlexFit.tight,
            child: const SizedBox(),
          ),
        Flexible(
          flex: yFlexesTwo,
          fit: FlexFit.tight,
          child: Row(
            children: [
              if (xFlexesOne > 0)
                Flexible(
                  flex: xFlexesOne,
                  fit: FlexFit.tight,
                  child: const SizedBox(),
                ),
              Flexible(
                flex: xFlexesTwo,
                fit: FlexFit.tight,
                child: Image.asset(
                  imgPath,
                  fit: BoxFit.fill,
                ),
              ),
              if (xFlexesThree > 0)
                Flexible(
                  flex: xFlexesThree,
                  fit: FlexFit.tight,
                  child: const SizedBox(),
                ),
            ],
          ),
        ),
        if (yFlexesThree > 0)
          Flexible(
            flex: yFlexesThree,
            fit: FlexFit.tight,
            child: const SizedBox(),
          ),
      ],
    );
  }
}

效果说明 #

• 正常效果：全屏状态下，布局元素完全贴合屏幕边缘，无上下边距
• 异常效果：调整屏幕尺寸后，Column组件无法贴顶，顶部和底部出现明显空白边距

解决方法 #

1. 移除Scaffold的默认内边距 #

网页端Scaffold会默认添加少量内边距，导致Stack无法占满整个屏幕。用MediaQuery.removePadding包裹Stack，移除上下内边距：

return Scaffold(
  body: MediaQuery.removePadding(
    context: context,
    removeTop: true,
    removeBottom: true,
    child: Stack(children: [
        const _OrangeVertical(),
        const _GreenVertical(),
        const _PurpleVertical(),
        const _LogoVertical(),
    ]),
  ),
);

2. 强制Column占满父容器高度 #

给FlexibleImage中的Column添加mainAxisSize: MainAxisSize.max，同时用SizedBox.expand包裹Column，确保它占满Stack的可用空间：

@override
Widget build(BuildContext context) {
  return SizedBox.expand(
    child: Column(
      mainAxisSize: MainAxisSize.max,
      children: [
        // 原有的Flexible组件内容
      ],
    ),
  );
}

3. 优化Flex比例适配 #

如果固定数值的Flex比例无法适配不同屏幕，建议改用基于屏幕百分比的布局，比如通过LayoutBuilder获取父容器尺寸后计算元素位置，避免因比例失衡导致的空白。

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