如何解决Flutter PageView嵌套Stack时文本不跟随滑动、触摸无法切页的问题

• 文本固定不跟随切换：你将Text组件放在了PageView同级的Stack中，相当于文本全局悬浮在所有页面之上，自然不会跟随页面滑动切换。
• 文本区域无法触发滑动：悬浮在上层的Text默认会消费触摸事件，导致下层PageView接收不到该区域的滑动手势。

1. 调整布局结构，将「图文叠加的Stack」放到PageView的每个子项内部，保证每个页面对应独立的文本和背景
2. 移除p1组件中嵌套的MaterialApp和Scaffold，避免页面嵌套冲突
3. 给文本组件包裹IgnorePointer，让触摸事件透传给下层PageView，即可实现文本区域也能触发滑动

OverviewScreen 部分 #

class OverviewScreen extends StatefulWidget {
  const OverviewScreen({Key? key}) : super(key: key);
  @override
  _OverviewScreenState createState() => _OverviewScreenState();
}

class _OverviewScreenState extends State<OverviewScreen> {
  PageController pageController = PageController(initialPage: 0);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        extendBodyBehindAppBar: true,
        appBar: AppBar(
          title: const Text(
            "Hu   R   Rehman",
            style: TextStyle(fontFamily: "MonteCarlo"),
          ),
          centerTitle: true,
          leading: const Icon(Icons.menu),
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.vertical(bottom: Radius.circular(16))
          ),
          backgroundColor: Colors.transparent,
          elevation: 0,
        ),
        body: PageView(
          controller: pageController,
          children: [
            // 第一页：内部独立实现图文叠加
            Stack(
              alignment: Alignment.center,
              fit: StackFit.expand,
              children: [
                const Image(
                  image: AssetImage('Image/soc1.jpg'),
                  fit: BoxFit.cover,
                  width: double.infinity,
                  height: double.infinity,
                ),
                IgnorePointer(
                  child: Text(
                    '第一页文本',
                    style: TextStyle(
                      fontSize: 31.0,
                      fontFamily: "MonteCarlo",
                      color: Colors.white,
                      fontWeight: FontWeight.w700
                    )
                  ),
                )
              ],
            ),
            // 第二页
            const p1()
          ],
        ),
      ),
    );
  }
}

p1 组件部分 #

class p1 extends StatefulWidget {
  const p1({Key? key}) : super(key: key);
  @override
  _p1State createState() => _p1State();
}

class _p1State extends State<p1> {
  @override
  Widget build(BuildContext context) {
    // 移除嵌套的MaterialApp和Scaffold，独立实现当前页的图文叠加
    return Stack(
      alignment: Alignment.center,
      fit: StackFit.expand,
      children: [
        // 第二页背景
        Container(color: Colors.blueGrey),
        // 第二页文本
        IgnorePointer(
          child: Text(
            '第二页文本',
            style: TextStyle(
              fontSize: 31.0,
              fontFamily: "MonteCarlo",
              color: Colors.white,
              fontWeight: FontWeight.w700
            )
          ),
        )
      ],
    );
  }
}

内容的提问来源于stack exchange，提问作者Sultan ul Arefin