Flutter 收起键盘时取消文本框焦点

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第6天，点击查看活动详情

前言

Flutter项目中经常会使用到TextField组件，它能够实现文本的输入功能。在实际应用中，当我们使用TextField组件输入文本完成后，点击键盘上的收起按钮收起键盘时（不触发onSubmitted属性的情况），TextField组件的焦点并不会自行取消，如果此时我们跳转其他页面后重新返回当前页面，会出现键盘重新弹出的现象，这会导致用户体验质量变差。我们理想的情况是"收起键盘的同时文本框会自动取消焦点"，所以本文探讨的主题就是收起键盘时取消文本框焦点。

解决方案

在这里介绍一个与键盘可见性相关的依赖：flutter_keyboard_visibility。 flutter_keyboard_visibility依赖提供了一个KeyboardVisibilityController控制器，可以通过对KeyboardVisibilityController监听获取有关键盘可见性的直接信息，我们可以在状态改变时做出相应的操作。

功能实现

在pubspec.yaml文件中引用flutter_keyboard_visibility依赖，通过这个依赖对键盘的状态进行订阅监听。当判断键盘收起的时候，可以执行取消输入框焦点的操作。

 dependencies:
   flutter_keyboard_visibility: ^5.3.0

import 'dart:async';
import 'package:flutter/cupertino.dart';
import 'package:flutter_keyboard_visibility/flutter_keyboard_visibility.dart';

// 可通过“with”关键字直接引入功能
mixin KeyboardFocusStateMixin<T extends StatefulWidget> on State<T> {
  late StreamSubscription<bool> keyboardSubscription;

  @override
  void initState() {
    super.initState();
    var keyboardVisibilityController = KeyboardVisibilityController();
    // 监听判断键盘状态
    keyboardSubscription = keyboardVisibilityController.onChange.listen(
      (bool visible) {
        if (!visible) {
          // 取消焦点
          FocusScope.of(context).unfocus();
        }
      },
    );
  }

  @override
  void dispose() {
    // 关闭监听事件，防止内存泄漏
    keyboardSubscription.cancel();
    super.dispose();
  }
}

注： 通过Mixin类的形式实现收起键盘时取消文本框焦点的功能，其他页面只需要通过with关键字就可以直接引用此功能，不需要其他多余的操作。

总结

flutter_keyboard_visibility依赖提供了对键盘的状态订阅监听的方法，可以通过对键盘状态的监听实现取消文本框焦点的操作。同时依赖也提供了许多其他的操作方法，有兴趣可以点击“ flutter_keyboard_visibility ”深入了解。