Flutter 3：点击TextField时阻止事件传递至父容器

要实现点击TextField时不触发父容器的点击事件，同时点击外部让TextField失焦，你可以按以下方式修改代码：

1. 移除包裹Container的AbsorbPointer——它会拦截所有子组件的交互事件，这正是你无法操作TextField的原因。
2. 给父级的GestureDetector设置behavior: HitTestBehavior.opaque，确保空白区域的点击能被捕获。
3. 在父GestureDetector的onTap方法中调用focusNode.unfocus()，实现点击外部失焦的效果。
4. 给TextField单独套一层GestureDetector，在onTapDown中调用details.stopPropagation()，阻止点击事件向上传递到父容器。

修改后的代码示例：

class Filters extends StatelessWidget {
  const Filters({super.key});
  // 提前初始化控制器和焦点节点
  final TextEditingController textEditingController = TextEditingController();
  final FocusNode focusNode = FocusNode();

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.symmetric(horizontal: 12),
      child: OutlinedButton.icon(
        // 省略原有配置项
        onPressed: () => {
          showDialog(
            context: context,
            builder: (_) {
              return Dialog(
                child: SingleChildScrollView(
                  child: GestureDetector(
                    behavior: HitTestBehavior.opaque,
                    onTap: () {
                      log("parent");
                      focusNode.unfocus(); // 点击外部让TextField失焦
                    },
                    child: Container(
                      // 省略原有配置项
                      child: Column(
                        children: [
                          // 省略其他子组件
                          GestureDetector(
                            onTapDown: (details) {
                              details.stopPropagation(); // 阻止事件向上传递
                            },
                            child: TextField(
                              controller: textEditingController,
                              focusNode: focusNode,
                              onTap: () {
                                log("textField..............");
                              },
                              // 省略原有配置项
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                ),
              );
            },
          );
        },
      ),
    );
  }
}

关键说明 #

• HitTestBehavior.opaque：让父级GestureDetector能够响应空白区域的点击，即使子组件没有填满整个容器。
• stopPropagation()：中断点击事件的冒泡传递，这样点击TextField时，父容器的onTap就不会被触发。
• focusNode.unfocus()：直接通过焦点节点控制TextField的失焦状态，替代高版本的onTapOutside属性，完美适配Flutter 3.3.10版本。

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