Flutter Web中如何禁用点击TextField外部收起键盘的默认行为

要解决Flutter Web里点击TextField外部自动收起键盘的问题，你可以尝试以下几种方案：

方案1：全局修改焦点管理行为 #

通过自定义FocusManager的shouldSkipUnfocus回调，指定当TextField处于焦点状态时，跳过自动失焦的逻辑。这种方式适合全局生效的场景：

import 'package:flutter/material.dart';

void main() {
  runApp(const MainApp());
}

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

  @override
  State<MainApp> createState() => _MainAppState();
}

class _MainAppState extends State<MainApp> {
  final FocusNode _textFieldFocus = FocusNode();

  @override
  void initState() {
    super.initState();
    // 配置焦点管理器，跳过TextField的自动失焦
    FocusManager.instance.shouldSkipUnfocus = (node) {
      // 仅针对当前TextField生效，若要全局所有TextField，可替换为：
      // return node.context?.widget is TextField;
      return node == _textFieldFocus;
    };
  }

  @override
  void dispose() {
    _textFieldFocus.dispose();
    // 页面销毁时恢复默认行为，避免影响其他页面
    FocusManager.instance.shouldSkipUnfocus = null;
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SingleChildScrollView(
          child: Column(children: [
            TextField(
              focusNode: _textFieldFocus,
              controller: TextEditingController(text: ''),
            ),
          ]),
        ),
      ),
    );
  }
}

方案2：用GestureDetector拦截外部点击 #

如果仅需要在当前页面生效，且不影响其他可交互组件的点击，可以用GestureDetector包裹页面内容，拦截点击事件并避免触发失焦：

import 'package:flutter/material.dart';

void main() {
  runApp(const MainApp());
}

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

  @override
  State<MainApp> createState() => _MainAppState();
}

class _MainAppState extends State<MainApp> {
  final FocusNode _textFieldFocus = FocusNode();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: GestureDetector(
          behavior: HitTestBehavior.translucent,
          onTap: () {
            // 仅当TextField处于焦点状态时，不执行失焦操作
            if (_textFieldFocus.hasFocus) {
              return;
            }
            // 其他情况正常处理失焦
            FocusScope.of(context).unfocus();
          },
          child: SingleChildScrollView(
            child: Column(children: [
              TextField(
                focusNode: _textFieldFocus,
                controller: TextEditingController(text: ''),
              ),
              // 示例：其他可交互组件需要单独包裹GestureDetector处理点击
              GestureDetector(
                onTap: () {
                  print("按钮被点击");
                },
                child: const Padding(
                  padding: EdgeInsets.all(16.0),
                  child: Text("测试按钮"),
                ),
              )
            ]),
          ),
        ),
      ),
    );
  }
}

注意：这种方式下，页面内的其他可交互组件（如按钮）需要单独用GestureDetector包裹，否则会被外层的点击拦截。

内容的提问来源于stack exchange，提问作者אורי orihpt