Flutter Web页面缩小右侧溢出问题求助：已用BoxFit仍无效

你的问题核心是固定水平内边距导致的溢出，同时Stack与Image的约束配合也存在适配问题，以下是具体解决思路和修改方案：

问题根源 #

• 代码中Padding的horizontal: 100是固定值，当窗口宽度小于200px时，左右边距总和已超出屏幕宽度，必然触发右侧溢出。
• Image直接绑定屏幕宽高并使用BoxFit.fill，会强制拉伸图片填满容器，窗口缩放时无法适配Stack的动态约束。

解决方案 #

1. 替换固定内边距为响应式边距 #

将固定水平边距改为基于屏幕宽度的百分比，让边距随窗口大小动态调整：

Padding(
  padding: EdgeInsets.symmetric(
    vertical: 30,
    horizontal: MediaQuery.of(context).size.width * 0.05, // 取屏幕宽度的5%作为边距
  ),
  // 后续子组件代码
)

2. 调整Image适配逻辑并约束Stack范围 #

用BoxFit.cover替代BoxFit.fill（保持图片比例并填充容器），同时给Stack添加约束确保不会超出屏幕边界：

ConstrainedBox(
  constraints: BoxConstraints(
    maxWidth: MediaQuery.of(context).size.width,
    maxHeight: MediaQuery.of(context).size.height,
  ),
  child: Stack(
    children: [
      Image.asset(
        'assets/Landing Page.png',
        fit: BoxFit.cover,
        width: double.infinity,
        height: double.infinity,
      ),
      // Padding及后续组件
    ],
  ),
)

3. 简化外层布局结构 #

如果页面不需要滚动，可直接去掉外层的ListView，避免其默认约束干扰布局适配。

修改后的完整代码片段 #

import 'package:flutter/material.dart';
import 'package:flutter_web/fonts.dart';

class LandingPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ConstrainedBox(
        constraints: BoxConstraints(
          maxWidth: MediaQuery.of(context).size.width,
          maxHeight: MediaQuery.of(context).size.height,
        ),
        child: Stack(
          children: [
            Image.asset(
              'assets/Landing Page.png',
              fit: BoxFit.cover,
              width: double.infinity,
              height: double.infinity,
            ),
            Padding(
              padding: EdgeInsets.symmetric(
                vertical: 30,
                horizontal: MediaQuery.of(context).size.width * 0.05,
              ),
              child: Column(
                children: [
                  // 你的其他子组件
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

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