Flutter引导页Skip Button无响应问题排查与解决求助

核心问题 #

你的Skip Button无响应是因为Stack的子Widget层级顺序错误：Page_view(controller)被放在了Skip Button之后，Stack中后添加的Widget会渲染在更上层，导致PageView完全遮挡了Skip Button，点击事件被PageView拦截，无法触发按钮的点击回调。

修复步骤 #

将Page_view(controller)移动到Stack子组件列表的最顶部，让它作为底层背景，不遮挡上层的Skip Button、指示器和底部按钮。

修改后的完整代码 #

import 'package:dots_indicator/dots_indicator.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:hr_app/resources/String_manager.dart';
import 'package:hr_app/resources/color_manager.dart';
import 'package:hr_app/resources/values_manager.dart';
import 'package:hr_app/view/screens/login_view/loginScreenView.dart';
import 'package:hr_app/view/screens/onboarding_view/pageParts/PageView.dart';
import '../../../resources/Font_Manager.dart';
import '../../../resources/size_config.dart';
import '../../common/CustomButton.dart';

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

  @override
  State<onBoardingScreen> createState() => _onBoardingScreenState();
}

class _onBoardingScreenState extends State<onBoardingScreen> {
  PageController? controller;

  @override
  void initState() {
    controller = PageController(initialPage: 0)..addListener(() {
      setState(() {});
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          // 把PageView移到最前面，作为底层背景
          Page_view(controller),
          Positioned(
            top: SizeConfig.defaultSize! * 7,
            right: AppSize.s40,
            child: Opacity(
              opacity: (controller!.hasClients) && (controller!.page == 2) ? 0.0 : 1.0,
              child: TextButton(
                onPressed: () {
                  print("skip button has been clicked");
                  Get.to(()=> const LogScreen());
                },
                child: Text(
                  StringManager.onBoardingPageSkip,
                  style: TextStyle(
                    fontSize: FontSize.s14,
                    color: ColorManager.primaryColor,
                  ),
                  softWrap: false,
                ),
              ),
            ),
          ),
          Positioned(
            left: 0, right: 0,
            bottom: SizeConfig.defaultSize! * 20,
            child: DotsIndicator(
              dotsCount: 3,
              position: (controller!.hasClients ? controller!.page! : 0).toInt(),
              decorator: DotsDecorator(
                shape: CircleBorder(
                  side: BorderSide(color: ColorManager.primaryColorDark, width: 1.5, style: BorderStyle.solid),
                ),
                color: Colors.transparent,
                activeColor: ColorManager.primaryTextColor,
              ),
            ),
          ),
          Positioned(
            left: SizeConfig.defaultSize! * 10,
            right: SizeConfig.defaultSize! * 10,
            bottom: SizeConfig.defaultSize! * 10,
            child: CustomGenralButton(
              text: (controller!.hasClients) && (controller!.page == 2)
                  ? StringManager.onBoardingPageGetStarted
                  : StringManager.onBoardingPageNext,
              onTap: () {
                if (controller!.page != 2) {
                  controller!.nextPage(
                    duration: const Duration(milliseconds: 300),
                    curve: Curves.easeIn,
                  );
                } else if (controller!.page! == 2) {
                  Get.to(() => const LogScreen());
                }
              },
            ),
          )
        ],
      ),
    );
  }
}

额外验证点 #

• 确认Page_view内部没有设置超出屏幕的尺寸，避免意外遮挡其他控件
• 如果需要更精细的层级控制，可以给Positioned组件添加alignment或使用IndexedStack，但调整Stack子组件顺序是最直接的解决方案

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