Flutter中保留背景图时如何实现PageView滑动？

我希望保留背景图的同时滑动PageView页面，但添加背景图后无法进行滑动操作（删除背景图则可正常滑动），页面指示器可以正常显示。

截图：

相关代码：

import 'package:eseowakorean/page/secondpage/add_image_profile1.dart';
import 'package:eseowakorean/page/secondpage/add_image_profile2.dart';
import 'package:eseowakorean/page/secondpage/add_image_profile3.dart';
import 'package:eseowakorean/page/secondpage/add_image_profile4.dart';
import 'package:flutter/material.dart';
import 'package:flutter/src/widgets/container.dart';
import 'package:flutter/src/widgets/framework.dart';
import 'package:flutter_svg/svg.dart';
import 'package:get/get.dart';
import 'package:smooth_page_indicator/smooth_page_indicator.dart';

import '../../widgets/text_widgets.dart';

class AddInformationOnBoarding extends StatefulWidget {
  const AddInformationOnBoarding({super.key});

  @override
  State<AddInformationOnBoarding> createState() =
      _AddInformationOnBoardingState();
}

class _AddInformationOnBoardingState extends State<AddInformationOnBoarding> {
  PageController _controller = PageController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          PageView(
            controller: _controller,
            children: [
              AddImageProfile1(),
              AddImageProfile2(),
              AddImageProfile3(),
              AddImageProfile4(),
            ],
          ),
          Container(
            height: double.infinity,
            width: double.infinity,
            // alignment: Alignment.center,
            decoration: const BoxDecoration(
              image: DecorationImage(
                  image: AssetImage(
                    'assets/home.jpg',
                  ),
                  fit: BoxFit.cover),
            ),

            child: Column(
              children: [
                SizedBox(
                  height: 60,
                ),
                Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 25),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: [
                      SvgPicture.asset('assets/Skip.svg'),
                      // poppinsTextWidget('hi')
                    ],
                  ),
                ),
                SizedBox(
                  height: 60,
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    poppinsTextWidget('Let' 's Talk About You!', fontSize: 20)
                  ],
                ),
              ],
            ),
          ),
          Container(
            alignment: Alignment(0, 0.75),
            child: Row(
              children: [
                SmoothPageIndicator(controller: _controller, count: 4),
              ],
              mainAxisAlignment: MainAxisAlignment.center,
            ),
          ),
        ],
      ),
    );
  }
}

问题核心是Stack的堆叠顺序：你把PageView放在Stack的第一个位置，后面的全屏Container（带背景图）完全覆盖在PageView上方，导致滑动事件被这个容器拦截，无法传递到下层的PageView。

以下两种方法可以快速修复：

方式一：调整Stack子组件顺序（推荐） #

将带背景图的Container移到Stack最底部，PageView放在它上方。这样PageView能正常接收滑动事件，同时背景图也能作为底层显示。修改后的代码：

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Stack(
      children: [
        // 背景容器移至最底层
        Container(
          height: double.infinity,
          width: double.infinity,
          decoration: const BoxDecoration(
            image: DecorationImage(
                image: AssetImage('assets/home.jpg'),
                fit: BoxFit.cover),
          ),
          child: Column(
            children: [
              SizedBox(height: 60),
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 25),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.end,
                  children: [
                    SvgPicture.asset('assets/Skip.svg'),
                  ],
                ),
              ),
              SizedBox(height: 60),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  poppinsTextWidget('Let\'s Talk About You!', fontSize: 20)
                ],
              ),
            ],
          ),
        ),
        // PageView放在背景容器上方
        PageView(
          controller: _controller,
          children: [
            AddImageProfile1(),
            AddImageProfile2(),
            AddImageProfile3(),
            AddImageProfile4(),
          ],
        ),
        // 页面指示器保持在最上层
        Container(
          alignment: Alignment(0, 0.75),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              SmoothPageIndicator(controller: _controller, count: 4),
            ],
          ),
        ),
      ],
    ),
  );
}

方式二：禁止背景容器拦截触摸事件 #

如果需要保留当前堆叠顺序，可给背景Container添加pointerEvents: PointerEvents.none，让它不拦截触摸事件，滑动事件就能穿透到下层的PageView。注意：容器内的可交互组件（如Skip按钮）需要单独设置pointerEvents: PointerEvents.all才能响应点击。

修改示例：

Container(
  height: double.infinity,
  width: double.infinity,
  color: Colors.transparent, // 必须设置颜色（透明也可），否则pointerEvents不生效
  pointerEvents: PointerEvents.none, // 禁止容器拦截触摸事件
  decoration: const BoxDecoration(
    image: DecorationImage(
        image: AssetImage('assets/home.jpg'),
        fit: BoxFit.cover),
  ),
  child: Column(
    children: [
      SizedBox(height: 60),
      Padding(
        padding: const EdgeInsets.symmetric(horizontal: 25),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.end,
          children: [
            // 给可交互组件单独开启触摸响应
            IgnorePointer(
              ignoring: false,
              child: SvgPicture.asset('assets/Skip.svg'),
            ),
          ],
        ),
      ),
      SizedBox(height: 60),
      Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          poppinsTextWidget('Let\'s Talk About You!', fontSize: 20)
        ],
      ),
    ],
  ),
),

优先推荐方式一，逻辑更清晰，无需额外处理组件的触摸事件。

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