Flutter中关闭DatePicker后TextFormField自动获焦问题求助

当showDatePicker弹出时，系统会自动移除TextFormField的焦点；但在日期选择器关闭后，Flutter会默认将焦点重新返还给之前的输入框，这就会再次触发FocusNode的hasFocus监听，导致日期选择器重复弹出。

在弹出日期选择器之前，主动调用_focusNode.unfocus()让输入框失去焦点，避免关闭选择器后焦点自动返回。同时添加状态标记，防止重复触发逻辑，提升稳定性。

修改后的完整代码 #

class MyWidget extends Stateful Widget {
  const MyWidget({super.key});

  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  final FocusNode _focusNode = FocusNode();
  final TextEditingController _textEditingController = TextEditingController();
  bool _isDatePickerShowing = false;

  @override
  void initState() {
    _focusNode.addListener(() async {
      if (_focusNode.hasFocus && !_isDatePickerShowing) {
        // 主动移除输入框焦点，避免关闭选择器后焦点自动恢复
        _focusNode.unfocus();
        _isDatePickerShowing = true;
        
        DateTime? selectedDate = await showDatePicker(
          useRootNavigator: false,
          context: context,
          initialDate: DateTime.now(),
          firstDate: DateTime(2000),
          lastDate: DateTime(2100),
        );

        if (selectedDate != null) {
          _textEditingController.text = selectedDate.toLocal().toString();
        }
        _isDatePickerShowing = false;
      }
    });
    super.initState();
  }

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

  @override
  Widget build(BuildContext context) {
    return TextFormField(
      controller: _textEditingController,
      focusNode: _focusNode,
      // 可选：设置为只读，禁止手动输入日期，仅通过选择器填充
      readOnly: true,
    );
  }
}

关键修改说明 #

• 弹出日期选择器前调用_focusNode.unfocus()，彻底移除输入框焦点，从根源避免关闭选择器后焦点自动恢复的问题。
• 添加_isDatePickerShowing状态标记，防止在日期选择器显示期间重复触发监听逻辑，避免意外重复弹出。
• 可选设置readOnly: true，让输入框仅支持通过日期选择器填充内容，符合业务逻辑且提升交互体验。

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