第三百一十一回

1. 概念介绍

我们在使用TextField组件作为输入框时默认情况下会自动获取光标(或者叫焦点)，此时它会自动唤起系统中的输入法键盘。也可以通过组件的autoFocus属性来配置
是否自动获取光标。如果光标离开输入框时我们如何得知？这便是本章回中将要介绍的内容。

2. 使用方法

我们可以使用TextFiled组件的focusNode属性来监听光标在输入框中的变化，接下来我们将介绍详细的使用方法：

• 创建一个FocusNode类型的对象；
• 使用FocusNode对象的hasFocus成员来判断输入框是否获取到了光标；
• 给FocusNode对象添加监听器，用来监听光标的变化；
• 使用完毕后移除FocusNode对象中的监听器；
  我们常用的做法是把第二步中的内容封装成一个监听器，在监听器中判断是否获取到了光标，然后分别做不同的业务处理。我们将在后面的小节中通过示例代码来演示。

3. 示例代码

final FocusNode pwd1FocusNode = FocusNode();

void _handlePwd1FocusChanged() {
  if(!pwd1FocusNode.hasFocus) {
    setState(() {
      if(pwdValue == "" || pwdValue.isEmpty) {
        isPwdEmpty = true;
      }else {
        isPwdEmpty = false;
      }
    });
  }
}


@override
void initState() {
  super.initState();
  ///添加监听器
  pwd1FocusNode.addListener(_handlePwd1FocusChanged);
}

@override
void dispose() {
  ///移除监听器
  pwd1FocusNode.removeListener(_handlePwd1FocusChanged);
  pwd1FocusNode.dispose();

  super.dispose();
}

TextField(
  autofocus: true,
  keyboardType: TextInputType.number,

 ///添加光标监听器
 focusNode: pwd1FocusNode,

  ///这个值是输入框中所有的内容，而不是当前输入的某个内容
  onChanged: (value) {
    debugPrint("hello onchanged $value");
  },

 decoration: const InputDecoration(
    ///属性值不为空时(!= null)显示errorText,
    errorText: isPwdEmpty? "password is empty": null,

    ///失去焦点并且errorTest的值不为null时就显示
    errorBorder: OutlineInputBorder(
      borderSide: const BorderSide(color:Colors.red,width: 1),
      borderRadius: BorderRadius.circular(16),
    ),
    ///获得售点并且errorTest的值不为null时就显示
    focusedErrorBorder: OutlineInputBorder(
      borderSide: const BorderSide(color:Colors.red,width: 1),
      borderRadius: BorderRadius.circular(16),
    ),
 
  ),
  //是否显示为密码形式，true时显示为小圆点
  obscureText: false,
),

我们在上面的示例代码中创建了FocusNode类型的对象pwd1FocusNode,并且给他添加了监听器，在页面关闭时移除监听器。我们把监听器封装成了独立的方法，在方法
中更新isPwdEmpty变量的值，这样就可以依据光标的变化来判断输入框中的值是否为空。当输入框中的内容为空时focusedErrorBorder属性对应的内容就会生效，
此时会在输入框周围显示一个红色的方框。其实，本章回的内容主要源于上一章回中内容的bug：当输入中没有任何内容时，我们把光标从当前输入框切换到其它输入框时
当前输入框不会有任何的提示。因为，我们在上一章回中介绍的错误提示是基于输入框中的内容，内容有变化时才会有错误提示，如果内容没有任何变化，那么不会有任何
的错误提示。而此时就需要监听光标变化，当内容无变化，但是光标有变化时就去做业务逻辑相关的事情，因此，我们在示例代码中给focusedErrorBorder属性赋值，
它用来在光标发生变化时而且errorText属性的值不为null时会显示该属性对应的内容，也就是一个环绕输入框的红色方框。

4. 内容总结

最后，我们对本章回的内容做一个全面的总结：

• 创建一个FocusNode对象并且把它赋值给TextFiele组件的focusNode属性可以监听光标的状态；
• 在FocusNode对象中添加监听器，可以随时监听光标的状态，使用完成后记得删除监听器；
• 监听到光标状态变化后可以配合errorText和focusedErrorBorder属性在输入框周围显示红色方框；
• 注意：如果一个页面中有多个TextField组件，那么最好创建多个FocusNode对象来监听光标的状态；
  看官们，与"如何在输入框中处理光标"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!