Flutter：GestureDetector搭配自定义TextFieldInput点击无响应问题求助

我尝试通过setState()管理元素间距gap并更新其值，但当GestureDetector的子组件为自定义TextFieldInput时，点击操作无法生效。当子组件是Text组件时功能正常。

相关代码示例 #

无法生效的GestureDetector+TextFieldInput代码

GestureDetector(
  onTap: () {
    setState(() {
      gap = 16.00;
    });
  },
  child: TextFieldInput(
    textEditingController: _passwordController,
    hintText: 'Enter your password',
    textInputType: TextInputType.text,
    isPass: true,
  ),
),

可正常工作的GestureDetector+Text代码

GestureDetector(
  onTap: () {
    setState(() {
      gap = smallGap;
    });
  },
  child: Container(
    child: Padding(
      padding: EdgeInsets.all(5),
      child: Text('Tap here'),
    ),
    padding: const EdgeInsets.symmetric(
      vertical: 8,
    ),
  ),
)

自定义TextFieldInput组件实现

import 'package:flutter/material.dart';

class TextFieldInput extends StatefulWidget {
  final TextEditingController textEditingController;
  final bool isPass;
  final String hintText;
  final TextInputType textInputType;
  final VoidCallback onTap;
  const TextFieldInput({
    super.key,
    required this.textEditingController,
    this.isPass = false,
    required this.hintText,
    required this.textInputType,
    required this.onTap,
    this.child,
  });
  final Widget? child;

  @override
  State<TextFieldInput> createState() => _TextFieldInputState();
}

class _TextFieldInputState extends State<TextFieldInput> {

  @override
  Widget build(BuildContext context) {
    final inputBorder = OutlineInputBorder(
        borderSide: Divider.createBorderSide(context)
    );
    return TextField(
      controller: widget.textEditingController,
      decoration: InputDecoration(
        hintText: widget.hintText,
        border: inputBorder,
        focusedBorder: inputBorder,
        enabledBorder: inputBorder,
        filled: true,
        contentPadding: const EdgeInsets.all(8),
      ),
      keyboardType: widget.textInputType,
      obscureText: widget.isPass,
      onTap: () {},
    );
  }
}

解决思路 #

• 移除TextField的空onTap回调：自定义组件内的TextField设置了onTap: () {}，这个空回调会优先拦截点击事件，导致外层GestureDetector的回调无法触发。直接删除这个空回调即可让手势穿透到外层。

• 利用组件本身的onTap参数：TextFieldInput已经定义了onTap参数但未使用，可将更新gap的逻辑移到该参数中，同时修改组件内部的TextField绑定该回调：

  // 父组件调用
  TextFieldInput(
    textEditingController: _passwordController,
    hintText: 'Enter your password',
    textInputType: TextInputType.text,
    isPass: true,
    onTap: () {
      setState(() {
        gap = 16.00;
      });
    },
  )
  
  // TextFieldInput组件内部修改
  TextField(
    // ...其他属性
    onTap: widget.onTap,
  )
  

• 强制手势穿透：如果必须保留外层GestureDetector，添加behavior: HitTestBehavior.opaque属性，让它优先响应点击：

  GestureDetector(
    behavior: HitTestBehavior.opaque,
    onTap: () {
      setState(() {
        gap = 16.00;
      });
    },
    child: TextFieldInput(
      // ...组件属性
    ),
  )
  

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