Flutter网页背景图缩放重叠问题：固定位置与小屏移除咨询

1. 固定背景图位置并实现网页滚动 #

当前问题核心是内容容器固定了size.height导致无法滚动，且背景图随窗口缩放后与内容重叠。可通过以下修改解决：

• 用Positioned.fill让背景图容器始终占满视口，固定位置不受内容滚动影响
• 内容区域包裹SingleChildScrollView实现滚动
• 调整DecorationImage参数避免背景图缩放错位

修改后的代码：

Widget build(BuildContext context) {
  const String _bgImagePath = 'assets/images/temp.jpeg';
  Size size = MediaQuery.of(context).size;

  return Scaffold(
    body: Stack(
      children: <Widget>[
        // 固定背景图，始终覆盖整个视口
        Positioned.fill(
          child: Container(
            decoration: BoxDecoration(
              image: DecorationImage(
                image: AssetImage(_bgImagePath),
                alignment: Alignment.centerRight,
                fit: BoxFit.none, // 保持原图尺寸，不随窗口缩放
                scale: 2.1,
              ),
            ),
          ),
        ),
        // 可滚动的内容区域
        SingleChildScrollView(
          child: SizedBox(
            width: size.width,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                CustomAppBar(),
                Spacer(),
                Body(),
                Spacer(flex: 2),
              ],
            ),
          ),
        ),
      ],
    ),
  );
}

2. 屏幕尺寸低于特定值时移除背景图 #

通过MediaQuery获取屏幕尺寸，添加条件判断即可控制背景图的显示。比如设置屏幕宽度小于768px时隐藏背景图：

修改后的代码：

Widget build(BuildContext context) {
  const String _bgImagePath = 'assets/images/temp.jpeg';
  Size size = MediaQuery.of(context).size;
  // 自定义移动端阈值，可根据需求调整
  const double mobileThreshold = 768;

  return Scaffold(
    body: Stack(
      children: <Widget>[
        // 仅当屏幕宽度大于阈值时渲染背景图
        if (size.width > mobileThreshold)
          Positioned.fill(
            child: Container(
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: AssetImage(_bgImagePath),
                  alignment: Alignment.centerRight,
                  fit: BoxFit.none,
                  scale: 2.1,
                ),
              ),
            ),
          ),
        // 可滚动内容区域
        SingleChildScrollView(
          child: SizedBox(
            width: size.width,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                CustomAppBar(),
                Spacer(),
                Body(),
                Spacer(flex: 2),
              ],
            ),
          ),
        ),
      ],
    ),
  );
}

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