第二百五十一回如何在在输入框中处理光标

talk_8

已于 2024-02-03 23:26:52 修改

阅读量1.3k

点赞数 38

分类专栏：一起Talk Flutter吧文章标签：移动开发Flutter TextField监听光标变化输入框获取光标状态输入框失去焦点

于 2024-01-07 10:55:39 首次发布

本文链接：https://blog.csdn.net/talk_8/article/details/135437025

版权

一起Talk Flutter吧专栏收录该内容

613 篇文章 16 订阅

订阅专栏

文章目录

1. 概念介绍
2. 使用方法
3. 示例代码
4. 内容总结

我们在上一章回中介绍了"如何在输入框中提示错误"相关的内容，本章回中将介绍 如何在输入框中处理光标.闲话休提，让我们一起Talk Flutter吧。

在这里插入图片描述

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时会显示该属性对应的内容，也就是一个环绕输入框的红色方框。