Flutter中TapGestureRecognizer点击无响应问题求助

核心问题分析 #

你的代码存在两处关键错误，导致点击文本后无法触发页面跳转：

1. toggle函数未正确更新状态
   在_AuthPageState的toggle方法中，仅执行了逻辑比较isLogin != isLogin，但未将结果赋值给isLogin，导致状态不会变更，页面也就无法切换。

2. TapGestureRecognizer的onTap未触发回调
   在TextSpan的recognizer配置中，() => widget.onClickedSignUp仅传递了函数引用，并未执行该函数，因此点击后没有任何响应。

额外提醒：TapGestureRecognizer需要手动调用dispose()，否则会造成内存泄漏。

修正后的代码 #

1. 修复auth.dart中的toggle函数

class _AuthPageState extends State<AuthPage> {
  bool isLogin = true;
  @override
  Widget build(BuildContext context) => isLogin
      ? LoginScreen(onClickedSignUp: toggle)
      : SignUpScreen(onClickedSignIn: toggle);
  
  void toggle() {
    setState(() {
      // 修正：将逻辑比较改为赋值操作
      isLogin = !isLogin;
    });
  }
}

2. 修复LoginScreen中的TapGestureRecognizer配置

推荐将recognizer提取到State类中管理，方便后续释放资源：

class _LoginScreenState extends State<LoginScreen> {
  TextEditingController emailController = TextEditingController();
  TextEditingController passwordController = TextEditingController();
  final navigatorKey = GlobalKey<NavigatorState>();
  final formKey = GlobalKey<FormState>();
  // 声明recognizer变量
  TapGestureRecognizer? _signUpRecognizer;

  @override
  void initState() {
    super.initState();
    // 初始化recognizer并绑定回调
    _signUpRecognizer = TapGestureRecognizer()..onTap = widget.onClickedSignUp;
  }

  @override
  void dispose() {
    // 手动释放recognizer，避免内存泄漏
    _signUpRecognizer?.dispose();
    emailController.dispose();
    passwordController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // ... 其他原有代码
    return RichText(
      text: TextSpan(
        text: 'No account',
        style: TextStyle(color: Colors.black),
        children: [
          TextSpan(
            // 使用已初始化的recognizer
            recognizer: _signUpRecognizer,
            text: 'Click Here',
            style: TextStyle(
              decoration: TextDecoration.underline,
              color: Colors.black
            )
          )
        ]
      )
    );
    // ... 其他原有代码
  }
}

如果不想提取变量，也可以直接修正onTap的写法：

TextSpan(
  recognizer: TapGestureRecognizer()
    // 修正：添加()执行回调函数
    ..onTap = () => widget.onClickedSignUp(),
  text: 'Click Here',
  style: TextStyle(
    decoration: TextDecoration.underline,
    color: Colors.black
  )
)

完成以上修改后，点击"Click Here"文本即可正常触发登录/注册页面的切换。

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