Flutter 点击输入框之外的地方时，输入框失去焦点

一、 需求说明

点击输入框时，输入框可以获取焦点，点击输入框之外的地方时，输入框失去焦点。

二、解决方案

1. 初始化focusNode，FocusNode focusNode = FocusNode()

2. 给输入框TextField设置focusNode

3. 在onTapOutside事件中调用focusNode.unfocus()

4. 组件销毁前释放focusNode，focusNode.dispose()

注意：如果Flutter SDK的版本太低的话，就没有onTapOutside事件，更新一下Flutter SDK就有了

三、代码分享

class _SearchInput extends State<SearchInput> {
  ///编辑控制器
  late TextEditingController _controller;

  /// 是否显示删除按钮
  bool _hasDeleteIcon = false;

  /// 输入框焦点
  FocusNode focusNode = FocusNode();

  @override
  void initState() {
    super.initState();
    _controller = TextEditingController();
  }

  @override
  Widget build(BuildContext context) {
    return TextField(
      controller: _controller,
      textInputAction: TextInputAction.search,
      textAlignVertical: TextAlignVertical.center,
      keyboardType: TextInputType.text,
      focusNode: focusNode,
      onTapOutside: (e) => {
        focusNode.unfocus()
      },
      onEditingComplete: () {
        FocusScope.of(context).requestFocus(focusNode);
      },
    );
  }

  @override
  void dispose() {
    super.dispose();
    _controller.dispose();
    focusNode.dispose();
  }
}

四、参考：

Flutter中焦点FocusNode使用分析Flutter输入框焦点事件的捕捉与监听 - 知乎