Flutter Windows桌面端Dialog内TextFormField点击后立即失焦的问题求助

大家好，我最近在开发Flutter Windows桌面应用时遇到了一个头疼的问题：我在Dialog里放了一个TextFormField，但每次点击输入框，它都会立刻失去焦点，根本没法输入内容。我试过设置autofocus: true，也手动用FocusNode请求焦点，但都没效果，焦点刚加上就没了。

我已经试过之前看到的用GlobalKey的解决方案，但对我的情况不适用。下面是我的完整代码，有没有大佬能帮我看看问题出在哪？

class _AddProveedorFormDesktopState extends State<AddProveedorFormDesktop> {
  final proveedorService = ProveedorServiceProvider.instance;
  bool isLoading = false;
  final TextEditingController _nameController = TextEditingController();
  final FocusNode _focusNode = FocusNode();
  final _formKey = GlobalKey<FormState>();

  @override
  void initState() {
    super.initState();
    Future.delayed(const Duration(milliseconds: 200), () {
      if (mounted) {
        _focusNode.requestFocus();
      }
    });
  }

  @override
  void dispose() {
    _nameController.dispose();
    _focusNode.dispose();
    super.dispose();
  }

  Future<void> createProveedor() async {
    // ... 省略实现
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {},
      child: Dialog(
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(10),
        ),
        child: Container(
          width: 500,
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(10),
            boxShadow: [
              BoxShadow(
                color: Colors.grey.withOpacity(0.2),
                spreadRadius: 1,
                blurRadius: 5,
                offset: const Offset(0, 3),
              ),
            ],
          ),
          child: Form(
            key: _formKey,
            child: Column(
              mainAxisSize: MainAxisSize.min,
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                Container(
                  padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 16),
                  decoration: BoxDecoration(
                    color: Colors.grey.shade50,
                    borderRadius: const BorderRadius.only(
                      topLeft: Radius.circular(10),
                      topRight: Radius.circular(10),
                    ),
                  ),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text(
                        'Añadir Proveedor',
                        style: TextStyle(
                          fontWeight: FontWeight.bold,
                          fontSize: 18,
                          color: AppColors.primaryColor,
                        ),
                      ),
                      IconButton(
                        icon: const Icon(Icons.close),
                        onPressed: () => Navigator.of(context).pop(),
                      ),
                    ],
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.all(24),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.stretch,
                    children: [
                      Text(
                        'Nombre del Proveedor',
                        style: TextStyle(
                          color: AppColors.primaryColor,
                          fontWeight: FontWeight.w500,
                        ),
                      ),
                      const SizedBox(height: 8),
                      TextFormField(
                        controller: _nameController,
                        focusNode: _focusNode,
                        autofocus: true,
                        decoration: InputDecoration(
                          hintText: 'Ingrese el nombre del proveedor',
                          border: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(8),
                            borderSide: BorderSide(color: Colors.grey.shade300),
                          ),
                          enabledBorder: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(8),
                            borderSide: BorderSide(color: Colors.grey.shade300),
                          ),
                          focusedBorder: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(8),
                            borderSide: BorderSide(
                              color: AppColors.primaryColor,
                              width: 2,
                            ),
                          ),
                          contentPadding: const EdgeInsets.symmetric(
                            horizontal: 12,
                            vertical: 16,
                          ),
                          filled: true,
                          fillColor: Colors.white,
                        ),
                        validator: (value) {
                          if (value == null || value.trim().isEmpty) {
                            return 'Por favor ingrese el nombre del proveedor';
                          }
                          return null;
                        },
                        onFieldSubmitted: (_) => createProveedor(),
                      ),
                    ],
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.all(24),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: [
                      TextButton(
                        onPressed: () => Navigator.of(context).pop(),
                        child: const Text('Cancelar'),
                      ),
                      const SizedBox(width: 16),
                      ElevatedButton(
                        onPressed: isLoading ? null : createProveedor,
                        style: ElevatedButton.styleFrom(
                          backgroundColor: AppColors.primaryColor,
                          padding: const EdgeInsets.symmetric(
                            horizontal: 24,
                            vertical: 16,
                          ),
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(8),
                          ),
                        ),
                        child: isLoading
                            ? const SizedBox(
                                width: 24,
                                height: 24,
                                child: CircularProgressIndicator(
                                  color: Colors.white,
                                  strokeWidth: 3,
                                ),
                              )
                            : const Text(
                                'Crear proveedor',
                                style: TextStyle(
                                  color: Colors.white,
                                  fontWeight: FontWeight.bold,
                                ),
                              ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

我自己排查的方向和尝试过的方法： #

• 尝试用GlobalKey绑定Form和TextFormField，无效
• 手动通过FocusNode在initState里延迟请求焦点，焦点会短暂出现然后立刻消失
• 设置autofocus: true，同样的问题，焦点瞬间丢失

可能的问题点和解决方案猜测： #

1. 外层GestureDetector的干扰：
   你现在把GestureDetector包裹在整个Dialog外面，而且onTap是空实现。在Windows桌面端的焦点管理中，这个GestureDetector可能会拦截点击事件，导致TextFormField无法稳定获取焦点。

   解决方法：直接移除这个外层的GestureDetector，或者修改它的行为让它不拦截子组件的点击：

   GestureDetector(
     behavior: HitTestBehavior.translucent, // 新增这行
     onTap: () {},
     child: Dialog(...)
   )
   

   如果你是想实现“点击Dialog内部空白处失去焦点”的效果，应该把GestureDetector移到Dialog的内部，包裹Container，并在onTap里主动取消焦点：

   return Dialog(
     shape: RoundedRectangleBorder(...),
     child: GestureDetector(
       onTap: () => FocusScope.of(context).unfocus(),
       child: Container(...), // 原来的Container内容
     ),
   );
   

2. 焦点请求时机问题：
   用Future.delayed来请求焦点不够可靠，建议换成WidgetsBinding.instance.addPostFrameCallback，它会在Widget渲染完成后执行，更适合请求焦点：

   @override
   void initState() {
     super.initState();
     WidgetsBinding.instance.addPostFrameCallback((_) {
       if (mounted) {
         _focusNode.requestFocus();
       }
     });
   }
   

3. Windows桌面端的焦点管理特性：
   有些情况下，Flutter Windows桌面端的Dialog需要额外处理窗口焦点。可以尝试在显示Dialog的时候，确保Dialog的窗口正确获取系统焦点。另外，检查你的Flutter版本是否是稳定版，旧版本可能存在桌面端焦点管理的bug，建议更新到最新稳定版。

希望这些方法能帮你解决问题，欢迎大家一起讨论！

内容来源于stack exchange