Flutter 如何实现背景图片随页面内容同步滚动效果？

问题原因 #

你当前将背景图配置在SingleChildScrollView外层、尺寸固定为屏幕大小的Container上，滚动时外层容器位置固定，因此背景不会跟随滚动。

解决方案 #

调整布局结构，将背景图移到SingleChildScrollView内部的Stack底层，让背景和上层木板点位处于同一滚动容器内，保证滚动时两者同步位移。同时根据藏宝图实际尺寸设置滚动内容的总宽高，避免点位被裁剪。

修改后的参考代码如下：

body: LayoutBuilder(builder: (context, constraints) {
  // 可替换为你最终藏宝图素材的实际宽高比例
  final mapHeight = constraints.maxWidth * 2.5; // 示例比例，按实际需求调整
  return SingleChildScrollView(
    child: SizedBox(
      width: constraints.maxWidth,
      height: mapHeight,
      child: Stack(
        children: [
          // 底层背景图
          Container(
            decoration: BoxDecoration(
              image: DecorationImage(
                image: NetworkImage('https://i.imgur.com/z1GHi45.png'),
                fit: BoxFit.cover,
              ),
            ),
          ),
          // 上层木板点位
          Wrap(
            children: [
              Container(
                margin: EdgeInsets.symmetric(horizontal: 30, vertical: 20),
                height: 100,
                width: 100,
                child: GestureDetector(
                  onTap: () {
                    Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (context) => TelaConhecMangue_(),
                      ),
                    );
                  },
                  child: Image(
                      image: NetworkImage(
                          'https://i.imgur.com/f8lp7Fg.png')),
                ),
              ),
              Container(
                margin: EdgeInsets.only(left: 115, top: 220),
                height: 100,
                width: 100,
                child: GestureDetector(
                  onTap: () {
                    Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (context) => TelaConhecMangue_(),
                      ),
                    );
                  },
                  child: Image(
                      image: NetworkImage(
                          'https://i.imgur.com/f8lp7Fg.png')),
                ),
              ),
              Container(
                margin:
                    EdgeInsets.symmetric(horizontal: 25, vertical: 55),
                height: 100,
                width: 100,
                child: GestureDetector(
                  onTap: () {
                    Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (context) => TelaConhecMangue_(),
                      ),
                    );
                  },
                  child: Image(
                      image: NetworkImage(
                          'https://i.imgur.com/f8lp7Fg.png')),
                ),
              ),
              Container(
                margin:
                    EdgeInsets.symmetric(horizontal: 60, vertical: 120),
                height: 100,
                width: 100,
                child: GestureDetector(
                  onTap: () {
                    Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (context) => TelaConhecMangue_(),
                      ),
                    );
                  },
                  child: Image(
                      image: NetworkImage(
                          'https://i.imgur.com/f8lp7Fg.png')),
                ),
              ),
              Container(
                margin:
                    EdgeInsets.symmetric(horizontal: 20, vertical: 15),
                height: 100,
                width: 100,
                child: GestureDetector(
                  onTap: () {
                    Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (context) => TelaConhecMangue_(),
                      ),
                    );
                  },
                  child: Image(
                      image: NetworkImage(
                          'https://i.imgur.com/f8lp7Fg.png')),
                ),
              ),
              Container(
                margin: EdgeInsets.only(left: 140, top: 120),
                height: 100,
                width: 100,
                child: GestureDetector(
                  onTap: () {
                    Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (context) => TelaConhecMangue_(),
                      ),
                    );
                  },
                  child: Image(
                      image: NetworkImage(
                          'https://i.imgur.com/f8lp7Fg.png')),
                ),
              ),
              Container(
                margin: EdgeInsets.only(left: 80, top: 100),
                height: 100,
                width: 100,
                child: GestureDetector(
                  onTap: () {
                    Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (context) => TelaConhecMangue_(),
                      ),
                    );
                  },
                  child: Image(
                      image: NetworkImage(
                          'https://i.imgur.com/f8lp7Fg.png')),
                ),
              ),
              Container(
                margin: EdgeInsets.only(left: 20, top: 300),
                height: 100,
                width: 100,
                child: GestureDetector(
                  onTap: () {
                    Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (context) => TelaConhecMangue_(),
                      ),
                    );
                  },
                  child: Image(
                      image: NetworkImage(
                          'https://i.imgur.com/f8lp7Fg.png')),
                ),
              ),
              Container(
                margin: EdgeInsets.only(left: 150, top: 200),
                height: 100,
                width: 100,
                child: GestureDetector(
                  onTap: () {
                    Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (context) => TelaConhecMangue_(),
                      ),
                    );
                  },
                  child: Image(
                      image: NetworkImage(
                          'https://i.imgur.com/f8lp7Fg.png')),
                ),
              ),
            ],
          ),
        ],
      ),
    ),
  );
}),

后续你完成藏宝图美术素材后，直接把mapHeight替换为素材的实际高度即可，无需调整其他逻辑。

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